Question

这是漫长的一天，我确信我必须在这里遗漏一些东西，所以如果我的话，请放轻松我！

我们采用以下HTML标记：

<div id="container">
    <button id="myButton">Some Text</button>
</div>

我想要做的是让button元素占用div#container提供给它的所有宽度。通常我们可以将display属性设置为block并删除可能对元素施加的任何浮点数（这适用于其他元素，例如锚点和跨度）。

但是，通过将button#myButton的CSS设置为以下，按钮仍然只占用文本的空间加上我应用的填充：

button#myButton {
    display: block;
    padding: 5px 10px;
    font-weight: bold;
}

任何人都可以解释为什么会发生这种情况。它必须在WebKit中工作，并且不需要跨浏览器支持。

Answer 1

使用width: 100%或display: block设置display: inline-block。

示例：http://jsbin.com/iwifon/edit

Answer 2

输入类型按钮或提交将box-sizing设置为border-box，将其设置为content-box有时可以修复一些宽度问题。

Answer 3

这应该是诀窍。您需要float:left + display:block + position:relative才能工作。这使width:100%和height:100%工作

button#myButton {
    display: block;
    padding: 5px 10px;
    font-weight: bold; 
    /*This is new stuff below this point*/
    float:left; /*For IE*/
    position:relative;/*For the 100% to work on height and width*/
    height:100%;/*Takes all available height*/
    width:100%;/*Takes all available width*/
    border:none; /*Get rid of default border in all browsers*/
    outline:none; /*Get rid of webkit and IE borders*/
}

<button>占用所有可用宽度</button>

3 个答案: