[ACCEPTED]-css horizontal navigation spacing-navigation

Accepted answer

Score: 25

I've had this happen to me. Unfortunately 4 it is caused by the browser taking the line 3 breaks between the list items and rendering 2 them as spaces. To fix, change your HTML 1 to:

<div id="footer">
  <ul>
    <li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>
  </ul>
</div>

Score: 13

If you use this:

div#footer li{
  width:160px;
  display:block;
  float: left;
  text-align:center;
}

It all looks lovely :D

Score: 3

The spaces between your <li> elements are due 6 to the whitespaces and carriage returns 5 between them, due to the inline style. If 4 you write :

<li><a href="one.html">One</a></li><li><a href="two.html">Two</a></li><li><a href="three.html">Three</a></li><li><a href="four.html">Four</a></li><li><a href="five.html">Five</a></li>

You'll see no more space between 3 them.

I'm not sure if inline-block's will 2 display nicely on IE6, so you may want to 1 try the float approach.

Score: 1

This has been completely solved by CSS flexbox.

CSS-Tricks 5 have an excellent writeup here, and a Codepen 4 example using <ul> here.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row nowrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  margin: 0px;
  
  line-height: 40px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  flex: 1 1 auto;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

I realise this is quite 3 old, but I encountered this issue 7 years 2 later in 2015 so this might help someone 1 else too.

Score: 0

div#footer ul{
    margin:0;
    padding:0;
    list-style:none;
}

div#footer li{
    width:155px;
    float:left;
    display:block;        
}

This code positioned li horizontally while 2 the spaces between them. If you want to 1 adding space between li elements:

div#footer li{
    width:155px;
    margin-right: 5px; //5px Space between li elements 
    float:left;
    display:block;        
}

Source: stackoverflow.com

[ACCEPTED]-css horizontal navigation spacing-navigation

Horizontal ul navigation aligned to the right side

How to remove page margin

Remove text-decoration underline, for a:after in css

How to navigate with keyboard through <ul> <li> element

How to add a shadow under a navbar using CSS?

How to implement a hash-key navigation?

Navigation Architecture Component - DestinationFragmentArgs is not generated

Jetpack compose navigation architecture without fragment?

Implementing breadcrumbs in Python using Flask?

Intermodule (library projects) communication in android application