Melhor maneira de gerenciar espaço em branco entre os itens da lista em linha

Question

O meu HTML é a seguinte:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

E o meu css:

#nav {
    display: inline;
}

No entanto, o espaço em branco entre os shows da li para cima. Posso remover o espaço em branco pelo colapso los assim:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

Mas isso está sendo mantido em grande parte pela mão e eu queria saber se havia uma maneira mais limpa de fazê-lo.

Answer 1

Várias opções aqui, primeiro eu vou te dar meu prática normal, quando a criação de listas em linha:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Em seguida, a CSS para torná-lo funcionar como pretende:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Obviamente eu deixei de fora a pairar e conjuntos de ativos, mas isso cria uma boa navegação nível de bloco, e é um método muito comum para fazer isso enquanto ainda mantém com os padrões. / * Lembre-se de ajustar a seu gosto, adicionar cor ao fundo, etc. * /

Se você gostaria de mantê-lo apenas com texto e apenas em linha, há elementos de bloco eu acredito que você gostaria de adicionar:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Percebendo que você gostaria de remover o espaço em branco, basta ajustar as margens / preenchimento em conformidade.

Answer 2

Outra forma útil para eliminar o espaço em branco é para definir a propriedade font-size da lista para 0 e dos elementos da lista um de volta para o tamanho necessário.

Answer 3

O que você realmente quer é o CSS3 white-space-colapso: descarte. Mas eu não tenho certeza se todos os navegadores realmente apoiar essa propriedade.

casal soluções alternativas A é deixar o final de rejeitos de uma tag consumir o espaço em branco. Por exemplo:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

Outra coisa que eu vi feito é usar comentários HTML para consumir espaço em branco

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

solução See de thisMat se são ok usando carros alegóricos, e dependendo das necessidades que você pode precisar adicionar uma <li> de fuga que está definido para clear: both;.

Mas a propriedade CSS3 é provavelmente o melhor forma teórica.

Answer 4

Uma solução melhor para itens de lista é usar:

#nav li{float:left; width:auto;}

tem exatamente o mesmo efeito visual sem a dor de cabeça.

Answer 5

Adote HTML e omitir </li> não baseados em XML.

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Em seguida, defina a propriedade dos itens para inline-block em vez de linha de exibição.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Answer 6

O problema é o tamanho da fonte na UL. Configurá-lo para 0 e ele vai desaparecer, mas você não quer que você texto real a ser definido de forma seguida, definir o seu tamanho tão pequeno, fonte LI para o que quiser que ele seja.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Answer 7

Eu tive o mesmo problema e nenhuma das soluções acima poderia consertá-lo. Mas eu descobri que isso funciona para mim:

Em vez disso:

<ul id="nav">
   <li><a href="./">Home</a></li>
   <li><a href="/About">About</a></li>
   <li><a href="/Contact">Contact</a></li>
</ul>

construir o seu código html como este (espaços em branco antes e depois do texto link):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>

Answer 8

<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>