Question

我正在尝试与How can a <label> completely fill its parent <td>?非常相似的东西，但我很难让标签占用td的全部大小（有效地使td成为我的按钮）。

上述解决方案无法在Chrome中正常运行。

我正在使用标签，以便根据用户选择使用javasscript在页面上显示一些框：

$(document).ready(function(){
   $('input[type="radio"]').click(function(){
        if($(this).attr("value")=="ssk"){
            $(".box").not(".ssk").hide();
            $(".ssk").show();
        }
        if($(this).attr("value")=="hd"){
            $(".box").not(".hd").hide();
            $(".hd").show();
        }
    });
});

我在https://jsfiddle.net/fuawg8y3/1/创建了一个小提琴，用红色边框显示标签如何不占据包含td的整个高度或宽度。

这是我的CSS：

div.top {
float:left;
padding-right: 20px;
}

#actual-table { border-collapse: collapse; }
#actual-table td {
  width: 50%;
  height:100%;
  padding: 10px;
  vertical-align: top;
}
#actual-table td:nth-child(even) {
  background: blue;
}
#actual-table td:nth-child(odd) {
  background: green;
}
#actual-table td:hover {
    background: #A8CAB4;
}
#actual-table td:active {
    background: #8bb89b;
}

.top input[type="radio"] {
position: absolute;
left: -5000px;
}

.top label {
    display: block; 
    border: 1px solid #f00;
    min-height: 100%; /* for the latest browsers which support min-height */
    height: auto !important; /* for newer IE versions */
    height: 100%; /* the only height-related attribute that IE6 does not ignore  */
}

这是我的HTML：

<div class="top">
  <table id="actual-table"
         <tr>
          <td><input id="2" type="radio" value="hd" name="sted"><label class="helpdesklabel" for="2"><strong>Column 1</strong><br>Some text. But not so much.</label></td>

          <td><input type="radio" name="sted" value="ssk" id="1"><label class="ssklabel" for="1"><strong>Column 2</strong><br>Some text.<br>And quite a lot of it.<br>And then some.<br>And even more</label></td>
</tr>
</table>
</div>

理想情况下，我想在文本中保留与td边界相关的填充，但标签会延伸到包含td的整个宽度和高度。

非常感谢任何帮助实现这一目标。

Answer 1

您需要将高度设置为参考点。在实践中，任何明确的高度都会这样做，并且您链接到的问题的解决方案是为tr提供1px的高度（它会自动增加到td的高度或多个）。

将此添加到您的样式表：

/* http://stackoverflow.com/a/3081445/557019 */
#actual-table tr { height: 1px; }

我已经创建了fiddle，因此您可以看到结果。

<强>更新

Chrome似乎不喜欢那种黑客行为。由于您正在使用jQuery，因此您可以遍历表格单元格并将其高度设置为自己当前的高度。

$('#actual-table td').each(function () {
    $(this).height($(this).height());
});

我updated the fiddle显示结果。

<label>如何在列结构中完全填充其父级？

1 个答案: