0

水平方向のリスト（ナビゲーションバー用）があり、個々のリスト項目を複数行にしたい。を使用してみました<br />が、リスト全体が1行スキップされます

これが私がhtmlのために得たものです：

<ul class="nav_list">
        <li><a href="#">Home<a></li>
        <li><a href="#">Bar/Bat Mitzvah<br />Tutoring<a></li>
        <li><a href="#">Early <br />Childhood<a></li>
        <li><a href="#">Home<a></li>
        <li><a href="#">Home<a></li>

</ul>

およびcss：

.nav_list {
    float:right;
    height:30px;
    margin-top:55px;
    width:510px;
}

.nav_list li {
    display:inline;
    list-style-type:none;

}

.nav_list li a {
    font-size:18px;
    font-family: arial;
    color:#b64366;
    text-decoration:none;
    padding:4px 4px 5px 10px;
    background-image:url('../images/nav_divider.png');
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;

    }

そして、これはそれがどのように見えるべきかです（フォトショップ）： ここに画像の説明を入力してください

助言がありますか？

4

3 に答える 3

1

これがあなたの解決策です：http：//jsfiddle.net/3jWwH/

「a」タグが正しく終了しなかった「/a」など、HTMLにいくつかのエラーがありました。

「br/」は正常に機能します。float：leftを「.nav_listli」に追加するだけです。

また、「a」ではなく「li」にパディングを適用する必要があると思います。

これは正しいです？

于 2012-06-24T16:37:06.590 に答える
0

私はこれがあなたが望むものだと思います：

http://jsfiddle.net/zXzXn/1/

CSS：

.nav_list {
    float:right;
    margin-top:55px;
}

.nav_list li {
    display:inline-block;
    list-style-type:none;
    text-align:center;
    margin:0 10px 0 0;

}

.nav_list li a {
    font-size:18px;
    font-family: arial;
    color:#b64366;
    text-decoration:none;
    padding:4px 10px 5px 10px;
    background-image:url('../images/nav_divider.png');
    background-repeat:no-repeat;
    background-position:right;
    font-weight:bold;
    cursor:pointer;
    display:block;

}
.nav_list li a:hover{
    border-bottom:2px solid #b64366;
}

</ p>

于 2012-06-24T16:29:02.897 に答える
0

各リスト要素に幅を設定して、特定の幅に制限することができます。これにより、単語が複数行に分割されます。

.nav_list li a {
    width: 100px;
}

次に、下の境界線を追加して、ホバーに下線を付けます。

.nav_list li :hover {
    border-bottom: 1px solid #b64366;
}
于 2012-06-24T16:33:00.533 に答える