带有 float:left;none; 正确项目的水平导航栏

Question

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

我用的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

尝试显示 li inline

<li style="display:inline">

Answer 2

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;
}

请记住为 cross-browser 兼容性添加必要的供应商前缀。

Answer 3

你很接近！您只需要在父级上设置 text-align: center; 使中间元素居中，然后将第一个元素向左浮动，最后一个向右浮动。

ul {
  text-align: center;
  padding: 0;
}

li {
  display: inline-block;
}

li:nth-child(1) {
  float: left;
}

li:nth-child(3) {
  float: right;
}

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

您也可以让它们都占用相同数量的 space 并使用 text-align 定位文本 left/right/center.

ul { padding: 0; }
li {
  width: 33.33%;
  display: inline-block;
  text-align: center;
}

li:nth-child(1) {
  text-align: left;
}

li:nth-child(3) {
  text-align: right;
}

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

Answer 4

这一期，你应该阅读this blog来弄清楚如何正确地使元素水平。

对于你的情况，有几种方法可以实现，我会把它们放在这个答案中。

ul {
 padding: 0;
}

li {
 list-style: none;
}

.first li {
 float: left;
 width: 50px;
}

.first .news {
 width: 100%;
 text-align: center;
 margin-left: -50px;
 margin-right: -50px;
}

.first li + li + li {
 float: right;
}

.second li {
 display: inline-block;
    float: left;
 width: 33%;
}

.second .news {
 text-align: center;
}

.second li + li + li {
 text-align: right;
    width: 34%;
}

.third {
 position: relative;
}

.third li {
 position: absolute;
}

.third .news {
 width: 100%;
 text-align: center;
}

.third li + li + li {
 position: absolute;
 right: 0;
 top: 0;
}

<h4>1.The key is 'margin-left' nagative value to expand space to text center is right.</h4>
<ul class="first">
  <li>home</li>
  <li class="news">news</li>
  <li>about</li>
</ul>
<br>
<h4>2.The key is make 'li' elements have average width and use text align to achieve it, but there is 1% error, but it's too tiny on sight</h4>
<ul class="second">
  <li>home</li>
  <li class="news">news</li>
  <li>about</li>
</ul>
<h4>3. This situation is easy to understand.</h4>
<ul class="third">
  <li>home</li>
  <li class="news">news</li>
  <li>about</li>
</ul>

带有 float:left;none; 正确项目的水平导航栏

Horizontal navbar with float:left;none;right items

html

css

navbar