将<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

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

Answer 3

你总是可以只包裹在一个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 4

的固定单元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 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

在镀铬/火狐这并不正常工作。

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