Estava modificando minha barra fixa do meu site, e me ocorreu algo que não consigo consertar: tenho 1 nav
que dentro tem 1 ul
que dentro tem 4 li
s e dentro de cada li
tem um a
, o que ocorre é que estou deixando a seguinte propriedade para os li
s para que ocupem 25% do tamanho da nav
(ou do ul
, não tenho certeza,mas é irrelevante já que ambos tem o mesmo tamanho e seus padding
s = 0), mas quando a regra é aplicada o último item da lista não se encaixa na mesma linha e pula pra outra,o que não quero que aconteça.
Aqui esta o código relevante:
<nav id="menu">
<ul>
<li class="active"><a href="index.html">HOME</a></li>
<li><a href="servicos.html">SERVIÇOS</a></li>
<li><a href="fotos.html">FOTOS</a></li>
<li><a href="contato.html">CONTATO</a></li>
</ul>
</nav>
/*CSS em arquivo separado*/
* {box-sizing:border-box;}
nav#menu {
position : fixed;
top : 0;
width : 320px;
left : 0;
z-index : 10;
}
nav#menu ul {
padding : 0;
z-index : 10;
background-color: #DCDCDC;
list-style : none;
margin : 0;
left : 0;
right : 0;
}
nav#menu ul li {
background-color:#DCDCDC;
display : inline-block;
width: 25%;
padding : 4px;
font-family : 'Titillium Web';
font-size : 10pt;
text-align : center;
}
nav#menu ul li.active {
background-color: #ffffff;
border-bottom : solid 2px rgb(200,20,20);
background-image: none;
color : rgb(200,20,20);
}
nav#menu ul li a {
text-decoration: none;
color : #393939;
word-spacing : 0;
}
O que percebi é que se você clicar e arrastar o mouse como se estivesse selecionando um texto além de selecionar o conteúdo dentro do a
também é selecionado espaços em branco entre os li
s.