31

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

任何帮助，将不胜感激。

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

没有固定尺寸的演示。

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 上不起作用。

4

6 回答 6

15

使用一个怎么样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在这里。

于 2013-10-27T22:44:43.657 回答
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 的顶部，而不是默认的中间。

于 2013-10-23T13:31:13.410 回答
0

您总是可以将按钮包装在 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;
}

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

于 2013-10-23T12:37:00.890 回答
0

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

于 2013-10-23T12:33:05.020 回答
0

这似乎有效：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%;
}

小提琴演示

它在 FF 上的外观：

在此处输入图像描述

于 2013-10-27T14:51:09.303 回答
0

包装在 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; 
}
于 2015-04-02T15:55:15.343 回答