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