CODEWITHSUNDEEP
htmlcss
Fernando Andrade
Fernando Andrade

Reputation: 875

Making all the <li> in vertical menu the same width CSS

Hi I am trying to build a vertical menu with an UL but i want that all the links have the same width independently of the length of the text...

so for now my ugly menu have this code:

<html>
<head>
    <link href="gg.css" rel="stylesheet" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="x">    
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Quem somos</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Onde Estamos</a></li>
        <li><a href="#">Contactos</a></li>
    </ul>
</div>
</body>
</html>

and this css:

body{
font-family: 'Droid Sans', sans-serif;
background-color:#D0DCE8;
}

ul{
list-style:none;
margin:0px;
padding:0px;
}

li{
display:table;
background-color:#FFC0CB;
}

a{
text-decoration:none;
color:#4183A7;
padding:10px 40px;
background-color:#FFC0CB;
display:block;
}a:hover{
    color:#6B9CD0;
}

#x{
width:150px;
}

i couldn't find anywhere a way of making all the

  • have the same width...

    Upvotes: 1

    Views: 3198

    • Answers (4)

    RC.
    RC.

    Reputation: 28207

    You can just change your li CSS def to:

    li {
  display:block;
  background-color:#FFC0CB;
}

    Upvotes: 0

    Kami
    Kami

    Reputation: 19407

    You can do this in two ways.

    You have set the a element as a block, so you can set the width by setting it's width or that of it's immediate container.

    #x ul li a {
  width:150px;
}

    Upvotes: 1

    Daniel Kurz
    Daniel Kurz

    Reputation: 816

    change your li in the css part to

    li{
    display:inline-block;
    width: 150px;
    ....
}

    Upvotes: 0

    NullPoiиteя
    NullPoiиteя

    Reputation: 57322

    you can do this by setting width of li. For example

    li{
width:40px;
max-width:40px; // to make sure that width will be 40px 
}

    Upvotes: 2

    Related Questions