1

How can I get the buttons to the right to align vertically, i.e. have an even right margin to this <ul>?

A node in the list looks like this:

<ul style="list-style:none;width:100%;">
  <li style="width:100%;">
    <table width="100%">
      <tr>
        <td>Parent 1</td>
        <td align="right">
          <!-- delete button -->
          <!-- edit-button -->
        </td>
      </tr>
    </table>
    <!-- child-<ul>s here -->
  </li>
  <!-- sibling-<li>s here -->
</ul>

The apparent problem with my code is that I have separate tables on each <li>, and they are not the same width. How can I organize the list to make the right margin perfectly even?

Stian
  • 1,522
  • 2
  • 22
  • 52

1 Answers1

1

I think you meant horizontal alignment of the buttons next to list elements.

To do so, you can set the size of first (main) ul tag, and then force li to take all width possible.

Example .html:

<ul id="mainList">
  <li>Parent 1
    <ul>
      <li>
        Child 1
        <b>EDIT</b>
        <b>DELETE</b>
      </li>
      <li>Child 2
        <b>EDIT</b>
        <b>DELETE</b>
        <ul>
          <li>
            Another Child 1
            <b>EDIT</b>
            <b>DELETE</b>
          </li>
        </ul> 
      </li>
    </ul>
  </li>
</ul>

Example .css:

#mainList {
  width: 400px;
}

li {
  width: 100%;
}

li b {
  margin-left: 5px;
  float: right;
}

If you want your #mainList to have 100% width, you additionally have to reset #mainList padding to 0px:

#mainList {
  width: 100%;
  padding: 0;
}

Demo

Also a note here, that using tables to position elements in HTML code is an anti-pattern. See discussion here.

linoskoczek
  • 135
  • 5