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

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>

如果我在label加上width ， 这就是我得到的结果

如您所见， 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

这是演示1还是演示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;
}

希望这个帮助