spaziatura di navigazione orizzontale css

Question

Sto cercando di creare una barra di navigazione orizzontale in CSS con 5 collegamenti equidistanti. Speriamo che l'html rimarrà così:

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

Quindi, con i CSS, voglio spaziarli uniformemente all'interno del div footer. Finora sto usando questo:

div#footer{
    height:1.5em;
    background-color:green;
    clear:both;
    padding-top:.5em;
    font-size:1.5em;
    width:800px;
}
div#footer ul{
    margin:0;
    padding:0;
    list-style:none;
}
div#footer li{
    width:155px;
    display:inline-block;
    text-align:center;
}

Funziona abbastanza bene, ma c'è una distanza tra le cose che non voglio. Ecco perché ho usato 155px invece di 160px per la loro larghezza, ci sono circa 5px di spazio tra ogni li. Da dove viene quella spaziatura? Come posso liberarmene? Se aumento la dimensione del carattere, aumenta anche la spaziatura.

Answer 1

Mi è successo. Purtroppo è causato dal browser che prende le interruzioni di riga tra le voci dell'elenco e le rende come spazi. Per risolvere, cambia il tuo HTML in:

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

Answer 2

Se lo usi:

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

Sembra tutto adorabile: D

Answer 3

Gli spazi tra gli elementi < li > sono dovuti agli spazi bianchi e ai ritorni a capo tra loro, a causa dello stile in linea. Se scrivi:

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

Non vedrai più spazio tra di loro.

Non sono sicuro che i blocchi inline verranno visualizzati correttamente su IE6, quindi potresti voler provare l'approccio float.

Answer 4

Questo è stato completamente risolto dal flexbox CSS.

I trucchi CSS hanno un eccellente writeup qui , e un esempio di Codepen usando < ul > qui .

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

Mi rendo conto che è piuttosto vecchio, ma ho riscontrato questo problema 7 anni dopo nel 2015, quindi questo potrebbe aiutare anche qualcun altro.

Answer 5

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

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

Questo codice è posizionato orizzontalmente mentre gli spazi tra loro. Se vuoi aggiungere spazio tra gli elementi li:

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