Question

我将position:absolute样式应用于元素，并且它们水平向右移动。我需要他们不要这样做......

＆＃13;

nav ul {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

nav li {
  display: inline-block;
}

nav a {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

＆＃13;

<nav>
  <ul>
    <li><a>Logo</a></li>
    <li><a>What</a></li>
    <li><a>How</a></li>
    <li><a>Why</a></li>
    <li><a>Supporters</a></li>
    <li><a>Blog</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

＆＃13;

或者如果有一个完全更好的方法来制作垂直对齐且均匀分布的导航栏，我可以开始新的。

Answer 1

您可以将列表项目拉伸为相同的大小（即合理），如下所示：

nav ul {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  margin: 0;
  padding: 0;
}

nav li {
  display: table-cell;
  float: none;
  width: 1%;
  height: 100px;
  border: 1px solid #ccc;
  vertical-align: middle;
}

<nav>
  <ul>
    <li><a>Logo</a></li>
    <li><a>What</a></li>
    <li><a>How</a></li>
    <li><a>Why</a></li>
    <li><a>Supporters</a></li>
    <li><a>Blog</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

Answer 2

保持它非常简洁。

您已经在使用HTML5 nav元素，这在语义上是有意义的。因此，您不需要使用ul。

您还使用了flexbox，这使线性对齐变得容易。

＆＃13;

nav {
  display: flex;
  justify-content: space-between;   /* horizontal alignment */
  align-items: center;              /* vertical alignment */
}

/* non-essential decorative styles */
nav {
  height: 50px;
  border: 1px dashed gray;
  background-color: lightyellow;
}
a {
  padding: 5px;
  background-color: lightgreen;
}

＆＃13;

<nav>
  <a>Logo</a>
  <a>What</a>
  <a>How</a>
  <a>Why</a>
  <a>Supporters</a>
  <a>Blog</a>
  <a>Contact</a>
</nav>

＆＃13;

Answer 3

向左或向右添加填充，也可以向<li>向左或向右填充空白

创建均匀间隔和垂直居中的导航栏

3 个答案: