links are leaving space

Asked

Viewed 69 times

1

I was modifying my fixed bar on my site, and something occurred to me that I can’t fix: I have 1 nav that inside is 1 ul that inside is 4 lis and within each li has a a, what happens is that I am leaving the following property to the lis to occupy 25% of the size of nav(or of ul , I’m not sure, but it’s irrelevant since both have the same size and their paddings = 0), but when the rule is applied the last item on the list does not fit on the same line and jumps to another, which I don’t want to happen. Here is the relevant code:

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

What I realized is that if you click and drag your mouse as if you were selecting a text in addition to selecting the content within the a white spaces are also selected between the lis.

html css

  • Try adding "Nav#menu ul li" to the "float: left;" property. If not, put the size in pixels to see how they behave. It is also worth putting "padding: 0px;" in the "Nav#menu"

1 answer

0


You can set the size of li with 80px and the Nav with width:auto.

* {box-sizing:border-box;}

nav#menu {
position        : fixed;
top             : 0;
width           : auto;
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:80px;
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;
}
            <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>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.