0

(un)ordered リストのテキストにのみ下線を引く方法はありますか? 具体的には、すべてのアイテムがリンクである箇条書きなしでインラインで表示されるメニューがあるとします。リンクには下線が引かれていませんが、ユーザーがリンクにカーソルを合わせると下線が引かれます。次に、目に見えない箇条書きで下線が引かれます。これは私を悩ませます。テキストにのみ下線を引く方法はありますか?

回答: 結局、私の問題は箇条書きではありませんでした。さらに、それは非常にばかげていたので、今ではこの質問を恥じています。コード化されたものはすべて覚えていると思っていたのですが&nbsp;、奇妙な理由でリスト項目の前に があったことが判明しました。私はすべてをそのままにしましたが、 :hover を<a>タグに作用するものから<span>、テキストを囲む「ホバー」クラスのタグに変更し、. を除外しました&nbsp;。これですべて問題なく、テキストに下線が引かれるだけです。<span>「トリック」を指摘してくれた@Ken Clarkに感謝します。

4

5 に答える 5

0

これはうまくいきますか？

ul li
{
    list-style:none;
}


a:hover{
    text-decoration:underline;
    cursor:pointer;
}
<ul>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
</ul>

于 2013-03-22T07:09:04.560 に答える
0

あなたが何を求めているのか正確に理解できません。

番号なしリストに箇条書きにしたくない場合

<ul type="none">  <u><li>one</li></u>  <u><li>two</li></u>  <u><li>three</li></u></ul>

タイプを none に設定すると、箇条書きが削除されます。

<ul style="list-style-type:none">

上記は完全に機能します。type:none はすべてのブラウザーで受け入れられるわけではないためです。

于 2013-03-22T06:53:34.047 に答える
0

ul の list-style を none に設定します。

ul { list-style: none }

ホバー時の下線は、弾丸があった場所に下線を引きません。ここにデモンストレーションするフィドルがあります。

于 2013-03-22T06:54:35.683 に答える
0

このような？

jsフィドル

HTML

<ul>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
    <li><a>Link</a></li>
</ul>

CSS

a {
    text-decoration:underline;
}

これはリンクにのみ下線を引き、箇条書きには下線を引きません。ホバー時にのみ下線を付けたい場合は、CSS を次のように変更します。

a {
    text-decoration:none;
}
a:hover {
    text-underline;
}
于 2013-03-22T06:55:49.640 に答える
0

リンクから下線を削除しa:hover、リンク内にテキストを配置して、そのスパンに下線スタイルを適用します。例:

<style>
.anchor
{
    text-decoration:none;
}

.anchor:hover
{
    text-decoration:none;
}
.spnItem:hover
{

    text-decoration:underline;
}
</style>
<a href="#" class="anchor"><span class="spnItem">Item</span> </a>
于 2013-03-22T06:56:09.090 に答える