Question

我在容器中有两个元素：

<div class="container">
    <span>This is a div</span>
    <button>This is a button</button>
</div>

样式如下：

span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    margin: 5px;
    background: #c0c0c0;
    font: inherit;
}

.container {
    border: 1px solid black;
}

您可以看到现场演示here。

为什么按钮的宽度与跨度不同？如何使按钮的行为类似于标准块级元素？

我需要在这里使用<button>，因为它的目的是提交表单。

Answer 1

这应该可以解决问题。实例：http://jsfiddle.net/925qz/18/

.container {
    border: 1px solid black;
    padding: 5px;
}
span, button {
    display: block;
    padding: 4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}
button{
    width:100%;
    margin-top: 5px;
    text-align: left;
}

Answer 2

分隔范围和按钮选择器，然后将宽度添加到按钮选择器。

Answer 3

我期待有一些规则集可以兼顾它们表现得像<div> s

没有。原因是button是"replaced element"。

我能找到的最清楚的来源是：http://reference.sitepoint.com/css/replacedelements

替换元素是其外观和尺寸为的任何元素   由外部资源定义。示例包括图像（<img>标签），   插件（<object>标签）和表单元素（<button>，<textarea>，   <input>和<select>代码）。可以引用所有其他元素类型   作为未被替换的元素。

替换元素也可能具有视觉格式要求   由CSS控制之外的元素;例如，用户   为表单元素呈现的界面控件。

Answer 4

浏览器通常会为许多元素提供不同的默认样式。标题元素，如h1和h2，ul，strong和em都使用默认CSS设置样式。一般的策略是使用Yahoo! reset css stylesheet之类的东西来删除这些样式，以获得更好的跨浏览器外观。

这不会立即帮助解决您的按钮问题，但部分解释了这一点。在内部，浏览器中的复杂元素（如按钮）由HTML定义，您无权以用户身份访问。此内部HTML也通过CSS设置样式。对于按钮，您必须使用显式CSS以不同于指示浏览器的方式对其进行样式设置。给它一个width并理解内部填充规则可能会从具有类似规则的div或span中给出不同的外观。

Answer 5

表单元素在几乎所有浏览器中都使用不同的盒子模型。这就是为什么它们实际上从未与其他元素具有相同的尺寸，即使所有元素都具有相同的尺寸。我还发现了Firefox针对此问题的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=562153

我总是将以下代码放在我的重置样式表中，以获得更均匀的工作：

select, input, textarea, button {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

根据PPK，代码适用于IE8以及所有其他主流浏览器：http://www.quirksmode.org/css/contents.html

Answer 6

当您将100％的宽度（通常具有块元素）应用于按钮时，它将忽略填充！几天前我遇到了这个问题：

<button> padding / width problem

如果你想填写所有的宽度并应用填充，这应该可以胜任：

button {
    width: 100%; 
    /* prefixes for box-sizing here */
    box-sizing: content-box;
}

当然总宽度将是100％+填充，所以它会比你想要的更多。由于这个原因，您可能需要采用固定宽度。

Answer 7

http://jsfiddle.net/925qz/30/

我是如何纠正的：左侧和右侧的填充已设置，但其周围的容器由容器管理按钮的宽度为100％。最后，按钮的分离由前5px边距管理。

span, button {
    display: block;
    padding-top:4px;
    padding-bottom:4px;
    border: 1px solid black;
    background: #c0c0c0;
    font: inherit;
}

button{
    margin-top:5px;
    width:100%;  
}

.container {
    border: 1px solid black;
    padding:5px;
}

如何防止<button>缩小到其内容的大小？</button>

7 个答案: