Horizontal navbar with float:left;none;right items - html

Question

I want a horizontal navbar with 3 items: one left, one center, and one right. But I cannot seem to get float: to work for me. The attached picture shows how the items do not line up horizontally. I want the centered item to really be a page title, not a link.
The clear: I have used seems to at least center the middle item, but without the clear: there is no symmetry. How can I get all 3 items to be positioned horizontally?
<ul>
<li style="float:left">Home</li>
<li style="clear:both;float:none">News</li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Answer 1

Flexbox does this pretty simply.
Assuming your markup:
<ul>
<li>Home</li>
<li>News</li>
<li><a class="active" href="#about">About</a></li>
</ul>
The css will then be:
ul {
display: flex;
justify-content: space-between;
align-items: center;
}
Do remember to add the necessary vendor prefixes for cross-browser compatibility.

Answer 2

You're close! You just need to set text-align: center; on the parent to center the middle element, then float the first element left and last one right.
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
li:nth-child(1) {
float: left;
}
li:nth-child(3) {
float: right;
}
<ul>
<li>Home</li><li>News</li><li><a class="active" href="#about">About</a></li>
</ul>
You can also have them all take up the same amount of space and use text-align to position the text 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>Home</li><li>News</li><li><a class="active" href="#about">About</a></li>
</ul>

Answer 3

In this issue, you should read this blog to figure out how to make element horizontal in correct.
In your case, there has servals way to achieve it, I will put them on this answer.
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

Try displaying the li inline
<li style="display:inline">