display：table-cell，border-spacing不能使用按钮吗？ [英] display: table-cell, border-spacing don't work with buttons?

问题描述

所以，我使用 display：table-cell 把两个按钮放在一起，这样，如果文本从一个溢出到下一行，两个按钮相同的高度。我有 border-collapse：separate 并且使用 border-spacing 在它们之间放置空格。如果我使用像< div class =button> ，但是一旦我使用<按钮> 元素，中间空格消失。


JSFiddle： p>

希望它有帮助。

编辑：看起来 border-spacing （事实上阻止样式无效）不能使用按钮或 input 。但它与其他内联元素如 span ， h1 或 b 。所以，输入和按钮 display：table-cell 属性无法正确应用（我改变了按钮和 width > input ，并显示 span 和 b > width 实际上保持在50％）。

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

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!

EDIT: 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?

解决方案

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%;
}

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.

Example: http://jsfiddle.net/codenighter/H7TZU/

Hope it helps.

EDIT: 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%).

Examples: http://jsfiddle.net/codenighter/HrTZS/

这篇关于display：table-cell，border-spacing不能使用按钮吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！