0

私のサイトには次のCSSとマークアップがあり、Accountリンクにカーソルを合わせると下線が表示されます。

デフォルトでは、下線はテキストから1ピクセル離れて表示されます。1ピクセルのクリアランスなしで、テキストの真下に下線を付けることは可能ですか。

可能であれば、私のサイトのすべてのリンクにこれを希望します。

a:active {
    outline: none;
}

a.current {
    text-decoration: underline;
    color: #000000;
    outline: none;
}
a:hover, a.active {
    color: #000000;
    outline: medium none;
    text-decoration: underline;
}

<a href="http://www.ayrshireminis.com/account/login/">Account</a>
4

4 に答える 4

2

はい、下の境界線を使用できますが、アンカーの行の高さを適切に調整するには、インラインブロックスタイルを有効にする必要があります。

a {
    text-decoration: none;
    color: #c64;

    /* cross-browser inline-block styling */
    display:inline-block;
    zoom:1;
    *display:inline;

    /* alter line-height until the border appears where you want it */
    line-height: .7em;
}

a:hover, a:active{
    padding-bottom:0;
    border-bottom:1px solid black;
}

jsFiddleデモ

于 2012-08-07T13:57:57.540 に答える
0

いいえ、変更することはできません。ただし、次のようなもので偽造することができます。

a:hover, a.active{
    border-bottom:1px solid black;
}​

a{
    padding-bottom:0;
    display:inline-block;
    line-height:.8 /*adjust accordingly*/;
}

これdisplay:inline-block;は、行の高さが正しく機能するために必要です。

于 2012-08-07T13:35:35.460 に答える
0

ブロックを作成する必要が<a>あります。そうしないと、パディングは何にも影響しません。

a { display: block; line-height:0.75em; ... etc }

a:hover { border-bottom:1px solid #000; }

http://jsfiddle.net/y49jN/3/

于 2012-08-07T13:55:47.170 に答える
0

heightまた、div、span、またはpのをthe未満に設定し、代わりにfont-size使用すると、境界線がテキストまたは要素に近づくこともわかりました。border-bottom: 1px solid blacktext-decoration: underline

于 2012-09-05T10:36:37.350 に答える