Question

我正在尝试将button的{{1}}属性设置为display，但它不像一个属性。

任何帮助将不胜感激。

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

DOM ：

table-cell

CSS ：

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

结果：

The result

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

请注意，某些解决方案似乎在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中的按钮包裹在div class =“item”中，就像其他div一样。但是这一次，我已经单独设置按钮的样式，以拉伸到div的高度和宽度。

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

编辑：

以下是修复http://jsfiddle.net/Rhhh7/10/

解决Firefox问题。

将其添加到“item”类：

.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上的表现：

enter image description here

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

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

6 个答案: