html - 带 float 的水平导航栏 :left;none;right items

Question

我想要一个包含 3 个元素的水平导航栏:一项在左侧，一项在中间，一项在右侧。但我似乎无法让 float: 为我工作。所附图片显示了元素如何不水平排列。我希望居中的元素真正成为页面标题，而不是链接。

我使用的 clear: 似乎至少使中间项居中，但没有 clear: 就没有对称性。如何让所有 3 个元素都水平放置？

<ul>
  <li style="float:left"><a href="#home">Home</a></li>
  <li style="clear:both;float:none"><a href="#news">News</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Answer 1

Flexbox 做这件事非常简单。

假设您的标记:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a class="active" href="#about">About</a></li>
</ul>

CSS 将是:

ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

请记住添加必要的供应商前缀以实现跨浏览器兼容性。