CSS Same size List Items for horizontal navbar

Question

Hi All,

Trying to learn a bit of CSS and I want a horizontal navbar and I am using ul and li to build it. I would like all the 'buttons' to have the same width, is that possible with just CSS?

Thanks

Answer 1

Yup,

ul li
{
    display: block;
    float: left;
    width: 100px;
}
ul
{
    padding: 0px;
    list-style-type: none;
}

Something like this. (Not tested);

Answer 2

Not exactly sure what you mean by same width. You just set it with pixels on the link? What are your constraints? do you know the list width? or the link width?

<style type="text/css">
    .menu { margin:0px auto; padding:0px; list-style-type:none; }
    .menu li { margin:0px auto; padding:0px; float:left; }
    .menu li a { display:block; width:200px; }
</style>


<ul class="menu">
    <li><a href="#section1">Section1</a></li>
    <li><a href="#section1">Section1</a></li>
    <li><a href="#section1">Section1</a></li>
</ul>