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

Question

I have a label and an input in an ol like this

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

If I add width to my label , this is the result I get

As you can see, the first line in my label (starting with the first word Donex ) is not aligned with the number 1 of my list. I want the text of my label to start on the same line as the number of my list.

Answer 1

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

Answer 2

Please Try this :

<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>

Run on Fiddle . Hope it will be your expected output.

Answer 3

is this what look like demo 1 or this 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>

added css for demo 1

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

added css for demo 2

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

hope this help