Question

首先，我认为填充被认为是DOM元素宽度的一部分是绝对荒谬的。

然而，我最后咬紧牙关并接受了这个事实......但是为了找出对于提交按钮，填充不是作为宽度的一部分计算的。

我将如何解决这个问题？

Answer 1

我不确定你是否只是错过了，但默认情况下，填充不被视为宽度的一部分。也就是说，如果一个元素的宽度为100px，填充为10px，边界为5px，那么它将呈现超过100+（10 * 2）+（5 * 2）= 130px。但是，该元素只包含100px的空间，这是width中设置的数量。

话虽这么说，您可以使用box-sizing属性更改默认行为。只需将其设置为border-box即可从框的宽度中减去填充（和边框），或content-box以将填充渲染到指定宽度之外。这是a demo。

为了提高兼容性，您还应该包含供应商前缀。所以，

input[type=button] {
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}

Answer 2

样式输入标签是一场噩梦，它们在浏览器中表现得非常奇怪，所以如果你这样做就没有简单的解决方案。

一种解决方法是将输入包装在div标签中并对其进行样式化。我的跨浏览器解决方案：

http://jsfiddle.net/hRCNS/1/

HTML：

<div class="main">
<div class="text">
    <input type="text" />
</div>
<div class="button">
    <input type="submit" />
</div>
</div>

的CSS：

div.main
{
     width: 300px;   
     text-align: center;
}
input
{
    width: 100%;
    border:0;
    padding:0;
    margin:0;
    background: transparent;
}
.text {
    border:solid 1px #bbb;
    padding: 10px;
}

.button {
    margin:1px;
    border:solid 1px #bbb;
    background: #ddd;
    border-radius: 4px;
}
.button input {
    padding:4px;
    cursor:pointer;
}

.button:hover {
    background:#ccc;
}
.button:active {
    background:#999;   
}

这样做你也可以解决宽度计算废话并且可以很好地自定义外观。 ;）

Answer 3

更改css

.button {
display: block;
padding: 10px;
}

并且不要将结束标记用于输入

为什么填充不计入提交按钮的宽度？

3 个答案: