Html <；按钮>；占用所有可用宽度

这是漫长的一天，我确信我一定错过了什么，所以如果我错过了，请对我放松点

让我们看一下以下HTML标记：

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

---

有人能解释为什么会发生这种情况吗。这在WebKit中工作非常重要，不需要跨浏览器支持

使用

display:block

或

display:inline block

设置

width:100%

---

示例：

使用类型按钮输入或提交将框大小设置为边框框，将其设置为内容框有时可以解决一些宽度问题。

这应该是关键所在。您需要

float:left

+

显示：block

+

位置：relative

才能工作。这使得

宽度：100%

和

高度：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*/
}

---

这样做会导致元素的宽度为100%+20像素，当然可以吗？不要添加大于的填充。按钮标记会自动执行。我怀疑，当我用我的标记尝试你的代码时，按钮是100%+20px。@BenM as@Last Rose Studios回答（尽管很简洁），你可以使用

box size:border box

来解决这个问题。“我认为你有一个反仰慕者，”马特波尔说。这是我第二次看到你的答案被随机否决。。。

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*/
}