How can i get all list items to be a equal width?

StackOverflow https://stackoverflow.com/questions/18103974

  •  23-06-2022
  •  | 
  •  

Question

I want my navigation bar to be a equal width for each ul element. i already tried Width:100% for ul.navbar a and ul.navbar li. JSfiddle: http://jsfiddle.net/HeyItsProdigy/a2zVr/

CSS:

@charset "utf-8";
/* Elements */

body {
    margin:0;
    padding:0;
    background-image:url(main%20bg.jpg)
}

ul {
    padding:0;
    margin:0;
}

/* End of elements */




/* Id's */

#container {
    margin-left:auto;
    margin-right:auto;
    width:1000px;
}

#body {
    border:5px solid #CF0;
    width:1000px;
    height:1000px;
    background-image:url(middle%20bg.png);
}

#navbar {
    position:relative;
    top:12px;
    text-align:center
}

/* End of is's */




/* Classes */

.navbar {
    list-style:none;
}

ul.navbar li {
    display:inline;
    margin:0;
    padding:0px;
    text-align:center;
}

ul.navbar a {
    background-color:#00CCFF;
    padding:10px;
    margin:0px;
    text-decoration:none;
    color:#CF0;
    border-radius:100px;
    border:2px solid white;
}

ul.navbar a:hover {
    background-color:#00FFFF;
    padding:10px;
    margin:0px;
}

/* End of classes */

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="style.css" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>

<script>
<!--



//-->
</script>

</head>

<body>
<div id="container">
    <div id="body">
        <div id="navbar">
            <ul class="navbar">
                <li><a href="index.html">Blog</a></li><li><a href="index.html">Photos</a></li><li><a href="index.html">Home</a></li><li><a href="index.html">Videos</a></li><li><a href="index.html">About</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>
Was it helpful?

Solution

Set the inner anchors as

ul.navbar a {
    display: inline-block;
    width: 80px;
}

Set a width long enough for your content.

http://jsfiddle.net/vrFx7/1/

OTHER TIPS

Remove display:inline from your <li>. That’s causing it to act like an inline element (for example <a>, <span> etc etc).

By the way, the reason which width:100% on your <li> wasn’t working is that inline elements can’t take a width. If you’d wanted it inline but also having a width you’d need to use display:inline-block. If you want your 5 items to line up then you’d use:

ul.navbar li {
  display: inline-block;
  width: 20%;
  …
}

You’d have to make sure that there’s no whitespace between the list items in the HTML as that itself will take up space when all your items are display:inline or display:inline-block. A more bullet-proof method would be to float them all left but that has its own set of problems.

I have made few changes to your fiddle. You can find it here. Hope this might be the answer of your problem.

I have modified your CSS, as shown below:

ul.navbar li {
    display:inline;
    margin:0;
    padding:0px;
    text-align:center;
    padding: 10px;
}
ul.navbar a {
    background-color:#00CCFF;
    border-radius:100px;
    margin: 0 10px;
    min-width: 75px;
    padding:10px;
    float:left;
    text-decoration:none;
    color:#CF0;
    display:block;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top