Question

我有一个嵌套的HTML列表。我试图在一个范围内对齐复选框，我希望在左侧的直线垂直线上对齐。

＆＃13;

<ul>
  <li>
    <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>Bat</div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R" <span class="chk">
      <input type="checkbox" class="chkdeletelot" style="float:left;" value="delete">
      </span>Cat</div>
  </li>
  <li>
    <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>Rat</div>
    <ul>
      <li>
        <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>two
          <div>
      </li>

    </ul>
  </li>
</ul>

＆＃13;

我试过浮动，它似乎不起作用。

注意：我不想丢失这些项目的边距。只是复选框。

Answer 1

尝试以下css代码，这将解决问题。

li ul span input{margin-left: -36px;}

Answer 2

您可以尝试使用

position: absolute;
left: 0;

像这样：

<ul>
  <li>
    <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="position:absolute; left:0" value="delete"></span>Bat </div>
    <div class="R">description</div>
  </li>
  <li>
    <div class="R" <span class="chk">
      <input type="checkbox" class="chkdeletelot" style="position:absolute; left:0" value="delete">
      </span>Cat</div>
  </li>
  <li>
    <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="position:absolute; left:0" value="delete"> </span>Rat</div>
    <ul>
      <li>
        <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="position:absolute; left:0" value="delete"> </span>one
          <div class="R">blah</div>
          <div class="R">blah blah</div>
        </div>
      </li>
      <li>
        <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="position:absolute; left:0" value="delete"> </span>two
          <div>
      </li>
    </ul>
  </li>
</ul>

这会将列表外部的垂直直线中的所有复选框对齐。那是你想要的吗？

Answer 3

嗨arbaaz你可以设置填充0到ul元素。的 Fiddle

<ul class="myList"> <li> <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>Bat</div> <div class="R">description</div> </li> <li> <div class="R" <span class="chk"> <input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>Cat</div> </li> <li> <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>Rat</div> <ul> <li> <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>one <div class="R">blah</div> <div class="R">blah blah</div> </div> </li> <li> <div class="R"><span class="chk"><input type="checkbox" class="chkdeletelot" style="float:left;" value="delete"> </span>two <div> </li> </ul> </li> </ul>

并使用css

ul{ padding-left:0 }

希望这会对您有所帮助

在嵌套的HTML列表中将复选框左对齐？

3 个答案: