CODEWITHSUNDEEP
htmlcssnavbar
zerowords
zerowords

Reputation: 3113

Horizontal navbar with float:left;none;right items

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

Test Navbar

Upvotes: 0

Views: 133

Answers (4)

Michael Coker
Michael Coker

Reputation: 53674

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><a href="#home">Home</a></li><li><a href="#news">News</a></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><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a class="active" href="#about">About</a></li>
</ul>

Upvotes: 1

Todd Mark
Todd Mark

Reputation: 1885

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>

Upvotes: 1

dommmm
dommmm

Reputation: 908

Flexbox does this pretty simply.

Assuming your markup:

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

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.

Upvotes: 2

Bishal
Bishal

Reputation: 837

Try displaying the li inline

<li style="display:inline">

Upvotes: 0

Related Questions