Question

您好我正在尝试使用UL构建垂直菜单，但我希望所有链接具有相同的宽度，与文本的长度无关...

所以现在我的丑陋菜单有这段代码：

<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>

和这个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;
}

我无法找到让所有

具有相同宽度的方法......

Answer 1

您可以通过设置li的宽度来完成此操作。例如

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

Answer 2

你可以用两种方式做到这一点。

您已将a元素设置为块，因此您可以通过设置宽度或其直接容器的宽度来设置宽度。

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

Answer 3

将css部分中的li更改为

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

Answer 4

您可以将li CSS def更改为：

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

使垂直菜单中的所有<li>具有相同的宽度CSS </li>

4 个答案: