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

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到 my label，这就是我得到的结果

如您所见，我的第一行label（以第一个单词开头Donex）与列表中的数字 1 不对齐。我希望我的标签文本与我的列表编号在同一行开始。

Answer 1

将标签样式设置为垂直对齐：顶部；

Answer 2

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

希望这有帮助

Answer 3

请试试这个：

<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上运行。希望这将是您的预期输出。