Question

I am having an issue were I cannot get my ‘li’ width correct. I have the design I am working off and they look to be about 20px apart to the right with display:inline-block but I cannot seem to get the numbers correct. JS Fiddle

HTML:

<div class="footer">
            <nav>
                <ul>
                    <li><a href="#">Terms of Use</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">Company</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>    
            </nav>

            </div>​

CSS:

.footer nav{
    float:right;
    width:530px;
    padding:13px 0 0 0;
}
.footer nav ul{
    list-style:none;
}
.footer nav li{
    display:inline-block;
    width:80px;
    text-align:center;
}
.footer nav li a{
    text-decoration:none;
    color:#000;
}​

Answer 1

If you want the distance between them to be fixed, you can’t use fixed-width list items for contents with varying width, and you can’t center the text. Just leave the width at auto, and set a margin-right of 20px to make them that distance apart from each other.