3

我<td>在 HTML 表的属性中有 2 个单选按钮。他们都有一个<label>标签。正如我们所知，表格标签没有属性宽度，我正在尝试找到一个跨浏览器解决方案来在每个单选按钮的标签之间设置一个空格。

我有这个代码：

<td class="changeUnitsSetLabelWidth">
  <?php echo $form->radio("changeUnitsMode",UnitsTabComponent::SET_ALL_METRIC)->set("id","changeUnitsMode_metric") . $form->label("changeUnitsMode", "Metric")->set("for","changeUnitsMode_metric");
        echo $form->radio("changeUnitsMode", UnitsTabComponent::SET_ALL_IMPERIAL)->set("id","changeUnitsMode_imperial") . $form->label("changeUnitsMode", "Imperial")->set("for","changeUnitsMode_imperial");
  ?>
</td>

我在我的 CSS 中添加了以下行：

.changeUnitsSetLabelWidth label{ display: inline-table; width: 80px;}

在互联网上搜索后，我发现它不适用于 IE7（什么新闻！？！）所以我希望你帮我找到另一种显示方式：inline-table，以我可以设置的方式标签中的宽度。

4

4 回答 4

3

usingdisplay:inline-table在这里没有任何意义。只需display:inline-block为两者之间的空间设置和设置宽度和边距，就可以了。

表现得像 inline-block 的 IE7 hack 是：

 zoom: 1;
 *display: inline;
于 2012-07-10T16:22:47.113 回答
1

试试这个：

.changeUnitsSetLabelWidth input,
.changeUnitsSetLabelWidth label {
    float: left;
}
.changeUnitsSetLabelWidth label {
    padding-left: 10px;
    padding-right: 10px;
    width: 80px;
}
于 2012-07-10T16:15:16.307 回答
1

我找到的解决方案是全部更改，而不是在属性中使用，而是在<td>属性中使用它<div> <span>并且效果很好。谢谢您的帮助

于 2012-08-21T07:58:11.880 回答
0

我的问题已解决

.my-class{
    *display: inline; 
    zoom: 1; 
    vertical-align: top;` 
}

它使所有元素保持顶部对齐。

于 2015-10-08T15:01:45.360 回答