Como se livrar do espaço branco entre os itens da lista horizontal do CSS? [duplicado

StackOverflow https://stackoverflow.com/questions/3043707

Pergunta

Esta pergunta já tem uma resposta aqui:

Eu tenho a seguinte página de teste e CSS. Quando exibido, há uma lacuna de 4px entre cada item da lista. Como faço para que os itens estejam próximos um do outro?

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

O 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;
}
Foi útil?

Solução

Você precisa usar display:block e float:left no lis para remover o espaço. Quando eles estão embutidos, o navegador os trata como palavras e, portanto, deixa o espaço no meio.

Veja também minha pergunta semelhante.

Outras dicas

Combine @skilldrick e @teedyay e você terá sua resposta e explicação.
Se <li>S são tratados como palavras do que qualquer espaço em branco ao seu redor é condensado a um espaço.

Então, acho que esse é um recurso que parece um bug.

Para remover o espaço, ou seja, todo o seu <li>está em uma corrente sem espaço branco entre eles.
OU
Reduzir o tamanho da fonte no <ul> para 0 e restaurar o tamanho do <li>s

Você também pode definir font-size:0 para o <ul> marcação.

Receio que isso esteja sujo também, mas ficarei surpreso se houver uma correção limpa nisso.

Coloque todos os seus <li>está em uma linha:

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

Desculpe.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top