Como se livrar do espaço branco entre os itens da lista horizontal do CSS? [duplicado
-
27-09-2019 - |
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;
}
Solução
Você precisa usar display:block
e float:left
no li
s 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.