CSS/HTML Weird LI spacing

Question

I have a HTML5 header setup. It uses <ul> and <li> elements for the links.

This is the HTML:

<header>
    <nav>
        <ul>
            <a href="/"><li id="logoli"><img src="/assets/logo.png" id="logo"></li></a>
            <a href="/"><li>Home</li></a>
            <a href="/"><li class="5px">Roulette</li></a>
            <a href="/"><li>Free Stuff</li></a>
        </ul>
    </nav>
</header>

And the CSS:

header {
    height: 100%;
    width: 100%;
}
nav {    
    width: 100%;
    height: 65px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 10px;
    background-color: rgba(0, 0, 0);
    color: #0077C5;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}
li {
    width: 100px;
    line-height: 65px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    text-align: center;
        display: inline;
    list-style: none;
    float: left;
}
#logo {
    height: 50px;
}
#logoli {
    padding-top: 7px;
    width: 250px;
}

For some reason this happens: https://image.prntscr.com/image/w0LAMn5qRMq0OqIAfDTsHw.png If you look at the nav bar you can easily see that the first two elements have a normal amount of spacing in-between. But the seccond and third have weirdly small spacing. I used inspect element on the <li>'s but they are all the same height. Can someone help me?

Answer 1

This is happening because you're explicitly defining a width on your list items. Remove the width and separate the list items with padding instead. Optionally, remove any padding on the last list item, since you won't need it.

li {
    /* width: 100px; */
    padding-right: 1em;
    line-height: 65px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
    text-align: center;
    display: inline;
    list-style: none;
    float: left;
}

li:last-child {
    padding-right: 0;
 }

https://jsfiddle.net/eulloa/yx7vkt79/

Also, restructure your list items so that they are the parent element of your anchors, not the other way around.

<li><a href="/">Home</a></li> <!-- structure your list items this way -->

<a href="/"><li>Home</li></a>

Answer 2

You should put the <a href>'s inside the <li> tags like this:

<header>
    <nav>
        <ul>
            <li id="logoli"><a href="/"><img src="/assets/logo.png" id="logo"></a></li>
            <li><a href="/">Home</a></li>
            <li><a href="/">Roulette</a></li>
            <li><a href="/">Free Stuff</a></li>
        </ul>
    </nav>
</header>

Also - you have a class="5px" on one of the <li>'s, but that class isn't in your CSS. You should make your <li>'s a fixed width and center the text, or use a standard padding on the left and right of the <li> text to maintain a uniform spacing rather than injecting classes to push single elements around.

Answer 3

You need some HTML and CSS Fixes, Wrap the anchors in li elements and the issue was you have mentioned a width to the li, which causes this wierd spacing.

HTML

<header>
    <nav>
        <ul>
            <li id="logoli">
              <a href="/"><img src="/assets/logo.png" id="logo"></a></li>
            <li><a href="/">Home</a></li>
            <li class="5px"><a href="/">Roulette</a></li>
            <li><a href="/">Free Stuff</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    height: 100%;
    width: 100%;
}
nav {    
    width: 100%;
    height: 65px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding-left: 10px;
    background-color: rgba(0, 0, 0);
    color: #0077C5;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}
li {
    line-height: 65px;
    vertical-align: middle;
    text-align: center;
    margin:0px 10px;
    text-align: center;
    display: inline;
    list-style: none;
    float: left;
}
#logo {
    height: 50px;
}
#logoli {
    padding-top: 7px;
    width: 250px;
}