Question

我在label中有input和ol

<ol>
  <li>
    <label for="testing" style="display:inline-block;width:200px;">
      <!-- Content Here -->
    </label>
    <input type="checkbox" id="testing" name="test" value="" />
  </li>
</ol>

如果我将width添加到我的label，this就是我得到的结果

正如您所看到的，我label中的第一行（从第一个单词Donex开始）与我的列表中的数字1不对齐。我希望我的标签文本与我的列表编号位于同一行。

Answer 1

将标签设置为vertical-align：top;

Answer 2

请试试这个：

<ol>
    <li ><label for="testing" style="width:200px;display:inline-block;vertical-align:top">Donec vitae sem et purus luctus venenatis. In hac habitasse platea dictumst. Vivamus posuere fermentum dapibus.</label> <input  type="checkbox" name="testing" value="" /></li>
</ol>

在Fiddle上运行。希望这是你的预期产量。

Answer 3

这看起来像demo 1或此demo 2

html

<ol>
    <li><label for="testing">Donec vitae sem et purus luctus venenatis. In hac habitasse platea dictumst. Vivamus posuere fermentum dapibus.</label> <input type="checkbox" name="testing" value="" /></li>
</ol>

为演示1添加了css

ol li label {
    display:block;
    width:200px;
}

为演示2添加了css

ol li label {
    float:left;
    width:200px;
}

希望这个帮助

有序列表编号和标签未对齐

3 个答案: