CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SamuraiJack
SamuraiJack

Reputation: 5539

Align checkboxes to the left, in a nested HTML list?

I have a nested HTML list. I am trying to align the checkboxes in a span that i want to align in a straight vertical line to the left. 

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

I tried float, it doesnt seem to work.

Note: I do not want to lose the margins for the items. Just the checkbox.

Upvotes: 0

Views: 458

Answers (3)

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

Hi arbaaz u can set padding 0 to ul element. 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>

and use css

ul{
padding-left:0
}

Hope this will help you

Upvotes: 0

daniman
daniman

Reputation: 284

You could try using 

position: absolute;
left: 0;

like so:

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

This aligns all of the checkboxes in a straight vertical line outside of the list. Is that what you wanted?

Upvotes: 0

Som
Som

Reputation: 270

Try the following css code and that will fix the issue.

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

Upvotes: 1

Related Questions