1

嗨，我正在尝试使用 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;
}

我在任何地方都找不到制作所有

  • 有相同的宽度...

    • 4

    4 回答 4

    2

    你可以通过设置宽度来做到这一点li。例如

    li{
width:40px;
max-width:40px; // to make sure that width will be 40px 
}
    于 2012-12-07T12:14:20.053 回答
    1

    您可以通过两种方式做到这一点。

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

    #x ul li a {
  width:150px;
}
    于 2012-12-07T12:18:19.287 回答
    0

    将您li的 CSS 部分更改为

    li{
    display:inline-block;
    width: 150px;
    ....
}
    于 2012-12-07T12:16:31.340 回答
    0

    您可以将您的 li CSS def 更改为：

    li {
  display:block;
  background-color:#FFC0CB;
}
    于 2012-12-07T12:18:23.337 回答