使按钮的宽度与高度相同

Make button same width as height

本文关键字：高度 按钮      更新时间：2023-09-26

我的网站顶部有一个工具栏，这是一个fixed div。在那里我还有另一个div，里面有一些按钮：

|somethingsomething.com                                       |
---------------------------------------------------------------
|statusBar____________________________________________|buttons|
|rest of website                                              |

.HTML：

<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post"><button class="homeButton"></button></form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post"><button class="subscriptionsButton"></button></form>
        <form class="searchButtonForm" action="?id=3" method="post"><button class="searchButton"></button></form>                   
    </div>
</div>

.CSS： 

div.statusBar{  
    position:fixed;
    top:0;
    width:100%;
    height:5%;
}
button{
    height:100%;
    margin-right:10px;
}
form{
    height:100%;
}
/* This is the same for all buttons, just different background-images */
button.homeButton{
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%; /* width height */
}

现在，我的问题是我无法知道按钮将获得哪个height，因此无法知道我应该指定哪个width。

我在这个网站和谷歌上搜索了很多，找到了很多关于div的答案，我也发现了这个jQuery：

<script type="text/javascript">
    var height = $('button.homeButton').height();
    $('button.homeButton').css({
        'width' : height + 'px';
    });
</script>

但它似乎不起作用。我在这里拉了这个片段形式，并认为问题可能是我使用的是按钮而不是div。

非常感谢

帮助。

试试这个小提琴 这把小提琴和你想要的类在一起 

var height = $('button.homeButton').height();
$('button').width(height);
div.statusBar {
    top:0;
    width:100%;
    height:5%;
}
button {
    height:100px;
    margin-right:10px;
}
form {
    height:100%;
}
/* This is the same for all buttons, just different background-images */
 button.homeButton {
    background:url(../resources/homeButton.png) no-repeat;
    background-size:auto 100%;
    /* width height */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="statusBar">
    <div class="statusBarMenuButtons">
        <form class="homeButtonForm" action="?id=1" method="post">
            <button class="homeButton"></button>
        </form>
        <form class="subscriptionsButtonForm" action="?id=2" method="post">
            <button class="subscriptionsButton"></button>
        </form>
        <form class="searchButtonForm" action="?id=3" method="post">
            <button class="searchButton"></button>
        </form>
    </div>
</div>

你不需要 JS。

div.statusBar将从子元素获取高度。如果窗体或按钮没有固定高度，则无法正常工作。使用 height:5%; 是从 body 或 html 中获取高度，这可能是未定义的。

尝试向div.statusBar 添加固定高度

div.statusBar {
   height: 60px;
}

此外，向button添加display: block;以正确应用宽度和高度属性。

相关文章：