23

ナビゲーションメニューに下線を付けたいのですが、問題は、ナビゲーションメニューを太くする必要があるため、幅を6pxに設定できるように、代わりに下の境界線を使用していることです。

境界線をテキストの近くに表示する方法を理解しているように見えます。現時点では、テキストと下の境界線の間に約10pxのギャップがあるようで、私は何もしたくありません。

別のdivを配置し、{bottom：10px}を使用して各{li}を基準にして配置しようとしましたが、機能しないようです。

これが私が持っているものです

コード

    <div id="menu">
    <ul>
        <li><a href="#home">home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

CSS

#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}

#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}

#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}

#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}

#menu ul li a:hover{
}
4

5 に答える 5

21

line-height次のように、とを組み合わせてmarginこのような効果を得ることができます。

#menu ul li a {
    border-bottom: 6px solid #000000;
    color: #000000;
    display: block;
    line-height: 50px;
    list-style-type: none;
    margin: 20px 0;
    text-decoration: none;
}
于 2012-04-12T21:13:50.730 に答える
5

display: inline-block;と組み合わせて使用border-bottom​​すると、長いリンクに改行が含まれている場合に、奇妙な動作の改行が発生する可能性があります。http：//jsfiddle.net/PQZ9H/を参照してください。background-imageまたは、との組み合わせを使用することもできますbackground-position。これには、表示値に触れないという利点があります。

a {
    text-decoration: none;
    position: relative;
    background-repeat: repeat-x;
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
    background-position: left 15px;
}
a:hover { background: none; }

欠点は、使用するすべてのフォントサイズに対して背景位置を定義する必要がある場合があることです。

この手法を使用すると、gやyの追加などのディセンダーから境界線を削除することもできます。

a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }

と

<a href="javascript:void(0)"><span class="descender">A link with descenders like g or y</span></a>

http://jsfiddle.net/25XNY/1を参照してください

于 2013-12-14T22:28:12.870 に答える
2

これを試してみてください（元のロシア語http://artgorbunov.ru/bb/soviet/20120510/）記事の方法（背景グラデーションとhttp://jsfiddle.net/d3WG6/）

<p>Зигварт считал <a><span>критерием истинности необходимость и&nbsp;общезначимость, для&nbsp;которых нет никакой опоры</span></a> в&nbsp;объективном мире.</p>

a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
于 2013-04-22T13:19:21.987 に答える
0

マージンプロパティはborder-bottomの位置を変更できないため、

要素の高さは、<a>境界線の下部の位置を定義します。

 #menu > ul > li > a {
      height: ;
 }
于 2017-02-15T18:05:26.403 に答える
-2

元の質問と同様の問題がありました。ここで回答されています：https ：//stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text

上記の解決策は、この質問の解決策を得ることができなかった他の人を助けるかもしれません。

于 2013-08-13T12:20:37.977 に答える