Question

我的标签有问题，如图所示，它们包含在表格中：

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

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

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

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

标签重叠在表格中

2 个答案: