0

li内のテキストはリンクですが、テキストを含むliアイテム全体がリンクとして機能する必要があります。li内のテキストだけでなく、liアイテム全体がリンクとして機能するようにするにはどうすればよいですか？

CSS：

#navbar {
    width: 900px;
    height: 50px;
    background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}

#navbar ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-align: center;
}

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    height: 100%;
}

#navbar a:link {
    font-weight:bold;
    color: black;
    font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
    text-decoration: none;
}

#navbar a:hover {
    background-color: #003300;
    color: gold;
}

#navbar a:visited {
    color: black;
}

a:active {
    background-color: #003300; 
    color: gold;
}

HTML：

    <div id="navbar">
        <ul>
            <li><a href="#home">HOME</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#news">NEWS</a></li>
            <li><a href="#reading">READING</a></li>
            <li><a href="#store">STORE</a></li>
            <li><a href="#contact">CONTACT</a></li>
        </ul>
    </div>

参考までにスクリーンショットを次に示します:(ホームにカーソルがあります）

ここに画像の説明を入力してください 乾杯

4

6 に答える 6

2

これがあなたのための簡単な例です：

http://jsfiddle.net/DFS5P/

于 2012-08-29T14:52:21.283 に答える
1

次に、いくつかのlicssをcssに移動する必要があります-そのように

#navbar ul li {
    height: 50px;
    width: auto;
    float: left;

}

#navbar ul li a {
    display: block;
    height: 100%;
   padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    border-right: 1px solid black;
}
于 2012-08-29T14:49:16.367 に答える
1

LIの代わりにpadding＆heightをアンカーに指定します。このように書いてください：

#navbar ul li {
    float: left;
    border-right: 1px solid black;
}

#navbar ul li a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 50px;
    height: 50px;
}

これを確認してくださいhttp://jsfiddle.net/DFS5P/1/

于 2012-08-29T14:55:17.537 に答える
0

追加してみてください

width:100%;

に：

#navbar ul li a {
    display: block;
    height: 100%;
}
于 2012-08-29T14:50:54.963 に答える
0

リストアイテムからパディングを削除して固定幅を指定すると、必要に応じて機能します。

#navbar ul li {
    height: 50px;
    width: 100px;
    float: left;
    line-height: 50px;
    border-right: 1px solid black;
}

jsFiddleの例

于 2012-08-29T14:52:55.603 に答える
0

これは間違いなく最善の方法ではありませんが、「li」全体を「a」タグ内に移動するだけの場合もあります。このように、「li」を含むすべてのものは、クリックするとリンクに移動します。

私は問題なく動作しますが、私が言ったように、それは最善の方法ではありません。

于 2012-08-29T14:53:27.047 に答える