表格中的标签重叠答案

【问题标题】：Label overlaps in table表格中的标签重叠
【发布时间】：2017-02-17 04:52:17
【问题描述】：

标签有问题，如您在图片中看到的，这些标签包含在表格中：

表格行如何自动适应标签内容？

<table class="table">
   <tr>
     <td>
       <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox">
       <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label>
     </td>
   </tr>
</table>

更新： 这是标签和单选按钮的 CSS：

input[type=radio].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px; width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=radio].css-checkbox + label.css-label {
    padding-left:21px;
    height:16px; 
    display:inline-block;
    line-height:16px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:16px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -16px;
}
label.css-label {
    background-image:url(../img/radio_button.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

【问题讨论】：

你能分享你的 CSS 吗？我只是在小提琴中尝试过，没关系。
这是正常的引导表布局。
在最新的 Bootstrap 3 上仍然可以正常工作，你还有其他 CSS 吗？
css-label radGroup1 不是 Bootstrap 的一部分
现在我将我的 css 添加到问题中。

标签： html css twitter-bootstrap html-table

【解决方案1】：

我刚刚又看了一遍，现在我发现了问题。我删除了属性vertical-align，它工作正常。

我的新 CSS 现在是这样的：

input[type=radio].css-checkbox {
    position:absolute;
    z-index:-1000;
    left:-1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height:1px; width:1px;
    margin:-1px;
    padding:0;
    border:0;
}

input[type=radio].css-checkbox + label.css-label {
    padding-left:21px;
    height:16px; 
    display:inline-block;
    line-height:16px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:16px;
    /*vertical-align:middle;*/
    cursor:pointer;

}

input[type=radio].css-checkbox:checked + label.css-label {
    background-position: 0 -16px;
}
label.css-label {
    background-image:url(../img/radio_button.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

【讨论】：

【解决方案2】：

do that if you want to like this output
<table class="table table-responsive table-condensed table-striped">
   <tr>
     <td>
       <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox">
    </td>
     <td>  
         <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label>
     </td>
        <td>
       <input type="radio" name="radio_1" id="radio_1_2" data-type="1" data-value="2" class="css-checkbox">
       </td>
       <td>
       <label for="radio_1_2" class="css-label radGroup1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</label>
     </td>
   </tr>
</table>

【讨论】：