显示：表单元格边框间距不与按钮的作用？ [英] display: table-cell, border-spacing don't work with buttons?

问题描述

所以，我用显示：表单元格来把两个按钮彼此相邻，因此，如果从一个文本溢出到下一行，两个按钮都相同的高度。我有边界崩溃：独立和我使用边框间距来把他们之间的空间。 DIV CLASS =按钮＆GT; ，但只要我使用＆LT;它如果我使用像＆LT工作得很好按钮＆GT; 元素，中间的空间消失。
结果
的jsfiddle： http://jsfiddle.net/uASbb/
结果
结果
现在，使用＆LT; D​​IV＆GT; 是好的，现在（如果不是语义准确），所以我大多只是好奇，如果有人知道究竟是怎么回事。
结果
注：我也注意到有一些使用（不同的）怪异的行为＆LT;输入＆gt;本同样的情况元素：的http://jsfiddle.net/G5SFX/1/
结果
结果
为显示：表单元格只是没有在这些情况下支持？这是一个错误？
结果
结果
谢谢！

So, I'm using display: table-cell to put two buttons next to each other so that if text from one overflows to the next line, both buttons are the same height. I have border-collapse: separate and am using border-spacing to put space between them. It works just fine if I'm using something like <div class="button">, but as soon as I use the <button> element, the middle space disappears.
JSFiddle: http://jsfiddle.net/uASbb/

Now, using the <div> is fine for now (if not semantically as accurate), so I'm mostly just curious if anyone knows what exactly is going on here.
Note: I've also noticed some (different) weird behavior with using <input> elements in this same situation: http://jsfiddle.net/G5SFX/1/

Is display: table-cell just not supported in these instances? Is this a bug?

Thanks!

编辑：好像你就不能应用显示：表单元格来一个按钮;它只是默认回到 inline-block的。看到Chrome的WebInspector这个截图：
结果

结果
结果
现在的问题是：这是故意的吗？它是规范或只是浏览器？我们可以得到它改变？

It seems like you just can't apply a display: table-cell to a button; it just defaults back to inline-block. See this screenshot from Chrome WebInspector:


Now the questions remain: Is this intentional? Is it the specification or is it just the browser? Can we get it changed?

推荐答案

插入按钮元素到 DIV 是一个很好的解决方案（在你的地方我会选择它，太），但是如果你想在两者之间不从帮助与空间侧同时显示按钮元素侧一个 DIV 你可以试试这个为你的 .item 类：

Inserting the button element into a div is a good solution (in your place I would have choose it, too), but if you want to display both button elements side by side with space in between without the help from a div you can try this for your .item class:

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

宽度降低到 46％允许保证金的 1％周围的每一个按钮元素。你现在有它们之间的空间，并且如果你还调整窗口大小的第二个按钮元素将不会在第一个倒下。

Width is reduced to 46% to allow a margin of 1% around every button element. You have a space between them now, and also if you resize the window the second button element won't fall under the first one.

例如： http://jsfiddle.net/$c$cnighter/H7TZU/

希望它帮助。

编辑：看来，边框间距（事实​​上没有任何块造型工作）不与按钮工作或输入。但它确实正在与其他内联元素，如跨度， H1 或 B 。因此，对于输入和按钮的显示：表单元格不能正常应用属性（我已经改变了宽度值按钮和输入而事实证明，而跨度和 b 的宽度 50％，实际上仍然是）。

It seems that border-spacing (in fact none of block styling is working) doesn't work with button or input. But it does working with other inline elements like span, h1 or b. So, for input and button the display: table-cell property can't be properly applied (I've changed the width value for button and input and it showed, while for span and b the width remained actually at 50%).

例如： http://jsfiddle.net/$c$cnighter/HrTZS/

这篇关于显示：表单元格边框间距不与按钮的作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！