css 如何在nav导航条里用无序列表写 并使列表每项处在一行（即在导航条的一行 ）

Question

css 如何在nav导航条里用无序列表写 并使列表每项处在一行（即在导航条的一行 ）并且使它们水平居中 垂直居中

Answer 1

您可以使用以下代码将无序列表放在导航条中并使其每一项都处于单独的一行，同时使其水平和垂直居中：

HTML代码：

<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

CSS代码：

nav {
  display: flex;            /* 使用flex布局 */
  justify-content: center;  /* 水平居中 */
  align-items: center;      /* 垂直居中 */
}

nav ul {
  display: flex;            /* 这里同样使用flex布局 */
  list-style: none;         /* 去掉列表样式 */
  margin: 0;                /* 去除列表默认的margin */
  padding: 0;               /* 去除列表默认的padding */
}

nav ul li {
  margin: 0 10px;           /* 设置每个列表项之间的间距 */
}

在上面的代码中，nav元素使用display: flex;样式使其成为flex容器。然后，通过使用justify-content: center;和align-items: center让其在水平和垂直方向上居中。

然后，使用display: flex;样式为无序列表（ul元素）指定flex布局，以使其成为flex容器。使用list-style: none;去除列表样式，使用margin: 0;和padding: 0;去除默认的margin和padding。最后，使用margin: 0 10px;为每个列表项设置间距。