所以,我使用display：table-cell将两个按钮放在一起,以便如果一个文本从一个文件溢出到下一行,则两个按钮的高度都相同.我有边框崩溃：单独,并使用边框间距在它们之间放置空格.如果我正在使用< div class =“button”>之类的东西,它的工作正常,但是一旦我使用< button>元素,中间空间消失.
JSFiddle：http://jsfiddle.net/uASbb/
现在,使用< div>现在很好(如果没有语义上的准确),所以我大多只是好奇,如果有人知道这里究竟发生了什么.
注意：我也注意到使用< input>的一些(不同的)奇怪的行为.在同样情况下的要素：http://jsfiddle.net/G5SFX/1/
显示：这些实例中不支持table-cell？这是一个bug吗？
谢谢！
编辑：似乎你只是不能应用一个显示：table-cell到一个按钮;它只是默认回到内联块.查看Chrome WebInspector的屏幕截图：
现在的问题依然存在：这是有意的吗？是规格还是只是浏览器？我们可以改变吗？
解决方法
将按钮元素插入到div中是一个很好的解决方案(在你所在的地方我也会选择它),但是如果你想在两个按钮元素之间并排显示空格,而不需要div的帮助,你可以尝试这个为你的.item类：
.item {
display: table-cell;
width: 46%;
background: aliceBlue;
border: 1px solid black;
margin: 1%;
}
宽度减少到46％,以便在每个按钮元素周围保持1％的余量.现在你们之间有一个空格,如果你调整窗口大小,第二个按钮元素不会落在第一个按钮之下.
示例：http://jsfiddle.net/codenighter/H7TZU/
希望它有帮助.
编辑：似乎边框间距(实际上没有块样式正在工作)不符合按钮或输入.但是它与其他内联元素(如span,h1或b)一起工作.因此,对于输入和按钮,显示：table-cell属性无法正确应用(我已经更改了按钮和输入的宽度值,并显示,而对于span和b,宽度实际上保持在50％).
