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

如何使按钮在右侧垂直对齐，即该<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>上都有单独的表，并且它们的宽度不同。如何组织列表以使正确的边距完美匹配？

最佳答案

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

为此，您可以设置第一个（主）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。

关于html - <ul>怎么有一个正确的边距？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57641511/