<ul>怎么有一个正确的边距？

Question

如何使按钮在右侧垂直对齐，即该<ul>的边距均匀？

列表中的节点如下所示：

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

我的代码的明显问题是，每个<li>上都有单独的表，并且它们的宽度不相同。我该如何组织列表以使右边距完美均匀？

Answer 1

我认为您的意思是列表元素旁边的按钮水平对齐。

为此，您可以设置第一个（主要） ul 标签的大小，然后强制 li 占用所有宽度。

示例.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>

.css示例：

#mainList {
  width: 400px;
}

li {
  width: 100%;
}

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

如果您希望 #mainList 的宽度为100％，则还必须将 #mainList 填充重置为 0px ：

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

Demo

这里还要注意一点，使用表格在HTML代码中放置元素是一种反模式。 See discussion here。