将<button>的显示设置为表格单元格

Question

我想设置button的display财产table-cell,但它并没有表现得像一个.

任何帮助,将不胜感激.

jsFiddle Demo (该演示包含一个固定的容器高度,但我需要它才能在没有它的情况下工作).

无固定尺寸演示.

DOM:

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <button class="item"></button>
</div>

CSS:

.container {
    border: 5px solid blue;
    display: table;
    table-layout: fixed;
}
.item {
    border: 3px solid red;
    display: table-cell;
}

结果:

编辑:我需要它完全像表格单元格一样工作,即使没有固定大小.

请注意,某些解决方案似乎在Chrome上运行正常但不适用于FF.

Answer 1

用一个label怎么样？这样您就可以获得按钮的功能,但标签的可见性.在Firefox和Chrome中测试过.表单提交的更新示例.

• 单元区域的可点击性不涉及JavaScript
• 在容器上没有固定高度的工作
• 当不同单元格的高度大于带按钮的单元格时,可以工作
• 适用于多个按钮单元

HTML:

<form onsubmit="alert(); return false;">
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
    <div class="container">
        <div class="item">4</div>
        <div class="item">5<br><br><br>Extended cell</div>
        <label class="item">Button 1<button type="submit"></button></label>
        <label class="item">Button 2<button type="submit"></button></label>
    </div>
</form>

CSS:

.container {
    margin: 10px;
    border: 5px solid blue;
    display: table;
    table-layout: fixed;
    width: 300px;
}
.item {
    border: 3px solid red;
    display: table-cell;
}
.item button {
    background-color: transparent;
    position: absolute;
    left: -1000px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

JSFiddle在这里.