带有float的水平导航栏：left; none;右边的项目

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

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

Answer 2

你很亲密！您只需要在父项上设置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>

您也可以让它们占用相同的空间，并使用text-align将文字定位为左/右/中心。

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 3

在本期中，您应该阅读this blog以了解如何使元素水平正确。

在你的情况下，有servals方式来实现它，我会把它们放在这个答案上。

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>

Answer 4

尝试显示li inline

<li style="display:inline">