Question

我在HTML表格的<td>属性中有2个radiobutton。它们都有<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，在某种程度上我可以在标签中设置宽度。

Answer 1

使用display:inline-table在这里没有任何意义。只需设置display:inline-block并为两者之间的空间设置宽度和余量即可。您应该没问题。

IE7黑客行为就像内联块一样：

 zoom: 1;
 *display: inline;

Answer 2

试试这个：

.changeUnitsSetLabelWidth input,
.changeUnitsSetLabelWidth label {
    float: left;
}
.changeUnitsSetLabelWidth label {
    padding-left: 10px;
    padding-right: 10px;
    width: 80px;
}

Answer 3

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

Answer 4

我的问题已由

解决

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

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

display：内联表等效crossbrower

4 个答案: