html - 复杂订单的均匀分布菜单

Question

我有如下的 HTML 和 CSS:

ul {
  display: inline;
  width: 300px;
  border: none;
  position: relative;
  text-align: center;
}
ul li {
  display: inline;
  border: none;
  text-align: center;
}
ul li li {
  display: inline;
  border: none;
}

<ul>
  <li>Home
    <ul>
      <li>HR</li>
      <li>Finance</li>
      <li>Operations</li>
    </ul>
  </li>
</ul>

输出结果如下:
主页 人力资源财务运营

我想删除 Home 和 HR 之间的空间以创建均匀分布的菜单项。任何帮助将不胜感激。

Answer 1

这是因为 ul 元素有一个默认的 padding-left 值，它是由浏览器在默认的 user-agent 样式表中设置的。您可以将其设置为 0:

ul {
  display: inline;
  width: 300px;
  border: none;
  position: relative;
  text-align: center;
  padding-left: 0;
}
ul li {
  display: inline;
  border: none;
  text-align: center;
}
ul li li {
  display: inline;
  border: none;
}

<ul>
  <li>Home
    <ul>
      <li>HR</li>
      <li>Finance</li>
      <li>Operations</li>
    </ul>
  </li>
</ul>