Come sbarazzarsi di spazio bianco tra le voci di elenco orizzontale css? [duplicare]

https://stackoverflow.com/questions/3043707

27-09-2019
|

Domanda

Questa domanda ha già una risposta qui:

Perché c'è una fessura tra questi inspiegabile inline- bloccare div elementi? 6 risposte
Come faccio a rimuovere lo spazio tra gli elementi inline-block? 38 risposte

Ho la seguente pagina di prova e css. Quando viene visualizzato, c'è un divario 4px tra ogni elemento della lista. Come faccio ad avere gli elementi per essere uno accanto all'altro?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">     

<html>
      <head>
        <link type="text/css" rel="stylesheet" href="/stylesheets/test.css" />
      </head>

      <body>
        <div>
          <ul class="nav">
            <li class="nav"><a class="nav" href="#">One1</a></li>
            <li class="nav"><a class="nav" href="#">Two</a></li>
            <li class="nav"><a class="nav" href="#">Three</a></li>
            <li class="nav"><a class="nav" href="#">Four</a></li>
          </ul>
        </div>
      </body>
    </html>

Il CSS:

ul.nav, ul li.nav {
  display: inline;
  margin: 0px;
  padding: 0px;
}

ul.nav {
  list-style-type: none;
}

li.nav {
  background-color: red;
}

a.nav {
  background-color: green;
  padding: 10px;
  margin: 0px;
}

a:hover.nav {
  background-color: gray;
}

Soluzione

È necessario utilizzare display:block e float:left sulle lis per rimuovere lo spazio. Quando sono in linea la tratta del browser loro come parole, e così lascia spazio in mezzo.

Si veda anche mia domanda simile .

Altri suggerimenti

Unire @Skilldrick e @teedyay e hai la tua risposta e la spiegazione.
Se <li>s vengono trattati come le parole di qualsiasi spazio bianco intorno a loro si condensa a uno spazio.

Quindi credo che questa è una caratteristica che si presenta come un bug.

Per rimuovere lo spazio o mettere tutte le vostre <li>s in una catena senza spazi tra di loro.
O
Ridurre la dimensione del carattere sul <ul> a 0 e ripristinare le dimensioni sulle <li>s

È anche possibile impostare font-size:0 per il tag <ul>.

Ho paura che questo è troppo sporca, ma sarò (piacevolmente) sorpreso se c'è una correzione pulito per questo.

Mettere tutti i tuoi <li>s su una riga:

<li class="nav"><a class="nav" href="#">One1</a></li><li class="nav"><a class="nav" href="#">Two</a></li><li class="nav"><a class="nav" href="#">Three</a></li><li class="nav"><a class="nav" href="#">Four</a></li>

Siamo spiacenti.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow