0

New to coding as of a week or so ago, and cannot understand, despite a lot of tinkering, why it will not work. Code is really untidy but a work in progress.

Just as the title states, I would have hoped this would have evenly spaced the 5 li elements across the 100% parent.

NOTE: The 19% width for #other was the only way I had been able to properly align them. Sorry if it confuses you.

* {
    margin: 0px 0px;
    padding: 0px 0px;
    box-sizing: border-box;
}
.navBar li {
    list-style-type: none;
    display: inline-block;
    font-family: Helvetica;
    font-size: 1.7em;
    line-height: 2;
    font-family: 'Anton', sans-serif;
}
.navBar {
    background: #92aad1;
    position: fixed;
    width: 100%;
}
.navBar li {
    position: relative;
    width: 20%;
    text-align: center;
}
.navBar #Other {
    width: 19%;
}
.navBar li:hover {
    background: lightgrey;
}
<div class="navBar">
    <ul list-style: none;>
        <li id="Home">Home</li>
        <li id="About">About</li>
        <li id="Links">Links</li>
        <li id="Work">Work</li>
        <li id="Other">Other</li>
    </ul>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
James
  • 3
  • 1

2 Answers2

0

You need to get rid of the "whitespace" between each. Basically: 

    <li id="Home">Home</li><!--
    --><li id="About">About</li><!--
    --><li id="Links">Links</li><!--
    --><li id="Work">Work</li><!--
    --><li id="Other">Other</li>

or

<li id="Home">Home</li><li id="About">About</li><li id="Links">Links</li><li id="Work">Work</li><li id="Other">Other</li>
surfthecity
  • 160
  • 2
  • 6
0

I usually use this way to display an inline menu with a defined width.

ul li{
    display:block;
    width:20%;
    float:left;
}

Hope it helps.

Gianno
  • 148
  • 9
  • That works really well, my understanding being that float removes all whitespace possible. Thanks. Definitely a better solution that below, thought they both work! – James Feb 03 '17 at 21:56
  • Happy that helps you! :) – Gianno Feb 03 '17 at 23:18