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

Question

我正在尝试将button 的display 属性设置为table-cell，但它的行为不像一个。

任何帮助将不胜感激。

jsFiddle Demo （演示包含一个固定的容器高度，但我需要它在没有它的情况下工作）。

No fixed sizes 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 here.

Answer 2

http://jsfiddle.net/Rhhh7/7/

在此示例中，我将按钮包装在 div class="item" 中，就像其他 div 一样。但是这一次，我单独设置了按钮的样式，以拉伸到 div 的高度和宽度。

.item button{
background:transparent;
padding:0;
border:0;
width:100%;
height:100%;
}

编辑：

这里是修复http://jsfiddle.net/Rhhh7/10/

解决 Firefox 问题。

将此添加到“项目”类中：

.item {
    border: 3px solid red;
    display: table-cell;
    height:100%;
    vertical-align:top;
}

为了使 td 具有 100% 的高度，父级也必须具有 100% 的高度。 vertical-align:top 然后将按钮设置到 div 的顶部，而不是默认的中间。

Answer 3

button.item { width: 100%; height: 50px; }

Answer 4

您总是可以将按钮包装在一个 div 中。

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

CSS

button{
   width:100%;
   height:2.75rem;
}

所以我想在一天结束时，这里的最终解决方案是，如果没有固定的测量单位，可能无法跨浏览器:(

Answer 5

这似乎有效： HTML

<div class="container">
    <div class="item">Some text to make the cell bigger</div>
    <div class="item"></div>
    <div class="item"><button class="button-item"></button></div>
</div>

CSS：

.container {
    margin: 10px;
    border: 5px solid blue;
    display: table;
    table-layout: fixed;
    width: 300px;
}
.item {
    border: 3px solid red;
    display: table-cell;
    background: transparent;
}
.button-item{
    border: 5px;
    -moz-border:5px;
    height:100%;
    width: 100%;
}

Fiddle Demo

它在 FF 上的外观：

Answer 6

包装在 div 中是一种解决方案，但我不明白为什么您不能像更改所有其他元素一样更改按钮元素的显示属性。例如，您可以使链接标签的行为类似于 div 标签。

这可以防止做一些事情，比如改变按钮的显示顺序： http://codepen.io/bakers37/pen/emoKvK

在 Chrome/Firefox 中，这不能按预期工作。

HTML

<div class="wrap">
 <div class="btn bottom">Back</div>
 <div class="btn top">Continue</div>
</div>


<div class="wrap">
 <button class="btn bottom">Back</button>
 <button class="btn top">Continue</button>
</div>

CSS

.wrap {
 display: table;
 margin: 20px 0 30px 0;
 width: 100%;
}

.btn
{
 display: block;
 width: 100%;
 margin: 5px 20px;
 padding: 10px;
 position: relative;
 background: #ccc;
}

.top { 
  display: table-caption; 
}