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

    これには 2 つの方法があります。

    要素をブロックとして設定したaので、要素の幅または直接のコンテナーの幅を設定して幅を設定できます。

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

    liCSS部分であなたをに変更してください

    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 に答える