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

【问题标题】：ordered list number and label misaligned有序列表编号和标签未对齐
【发布时间】：2013-05-12 02:33:29
【问题描述】：

我在ol 中有一个label 和一个input，就像这样

<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 不一致。我希望我的标签文本与我的列表编号在同一行开始。

【问题讨论】：

相关：stackoverflow.com/questions/8283285/…

标签： html css

【解决方案1】：

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

【讨论】：

如果我在标签中添加vertical-top，结果我得到的结果并不是完全对齐。

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

【讨论】：

标签元素缺少display:inline-block;，因此忽略宽度
是的，我已经放弃了。你需要这个吗。
是的，我需要它，因为标签可能会变长

【解决方案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;
}

希望有帮助

【讨论】：

如何在演示 1 中将我的复选框也对齐到标签的右上角？