14

所以，我习惯display: table-cell将两个按钮放在一起，这样如果一个按钮的文本溢出到下一行，两个按钮的高度相同。我已经border-collapse: separate并且正在使用border-spacing在它们之间放置空间。如果我使用类似的东西，它工作得很好<div class="button">，但是一旦我使用该<button>元素，中间空间就会消失。
JSFiddle： http: //jsfiddle.net/uASbb/

现在，使用现在<div>很好（如果在语义上不准确的话），所以我很想知道是否有人知道这里到底发生了什么。
注意：我还注意到<input>在相同情况下使用元素的一些（不同）奇怪行为：http: //jsfiddle.net/G5SFX/1/

是display: table-cell只是在这些情况下不支持？这是一个错误吗？

谢谢！

编辑：似乎您不能将 adisplay: table-cell应用于按钮；它只是默认回到inline-block. 请参阅 Chrome WebInspector
表格单元 -> 内联块

的此屏幕截图：现在问题仍然存在：这是故意的吗？是规范还是只是浏览器？我们可以改变它吗？

4

1 回答 1

2

将button元素插入 adiv是一个很好的解决方案（在您的位置，我也会选择它），但是如果您想button在没有 a 帮助的情况下并排显示两个元素之间有空格，div您可以为您的.item班级尝试这个：

.item {
    display: table-cell;
    width: 46%;
    background: aliceBlue;
    border: 1px solid black;
    margin: 1%;
}

Width减少到46%允许每个元素周围有一个margin。你现在在它们之间有一个空间，而且如果你调整窗口大小，第二个元素不会落在第一个元素之下。1%buttonbutton

示例：http: //jsfiddle.net/codenighter/H7TZU/

希望能帮助到你。

编辑：似乎border-spacing（实际上所有block样式都不起作用）不适用于buttonor input。但它确实适用于其他内联元素，如span,h1或b. 所以，for inputand属性不能被正确应用（我已经改变了andbutton的值并且它显示了，而 for and the的值实际上保持在 50%）。display: table-cellwidthbuttoninputspanbwidth

示例：http: //jsfiddle.net/codenighter/HrTZS/

于 2012-09-26T08:10:32.893 回答