Machen Sie die untere Grenze näher an Text

Question

Ich möchte mein Navigationsmenü unterstreichen, aber das Problem ist, dass ich es dicker sein muss, damit ich die untere Grenze stattdessen verwende, damit ich die Breite auf 6px einstellen kann.

Ich kann scheinen, um herauszufinden, wie die Grenze näher an den Text erscheinen. Es scheint momentan eine Lücke von 10 px zwischen dem Text und der unteren Grenze zu sein und ich möchte keine haben.

Ich habe versucht, ein anderes div zu positionieren und es relativ zu jedem {li} mit {bottom: 10px} zu positionieren, aber ich kann es scheinbar nicht zum Laufen bringen.

Hier ist, was ich habe so

CODE

<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{ 
} 

Answer 1

Sie eine Mischung aus line-height und margin verwenden können, einen solchen Effekt zu sammeln, etwa so:

#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; 
} 

Answer 2

Versuchen Sie, diese Zugabe:

padding-bottom: 5px; 

zu

#menu ul li a{ 

Answer 3

Versuchen this (Ursprung russische http://artgorbunov.ru/bb/soviet/20120510/) Artikel Methoden (Hintergrundgradienten und 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; } 

Answer 4

hatte ein ähnliches Problem mit der ursprünglichen Frage. Es wurde hier beantwortet: https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text

Die obige Lösung könnte anderen helfen, die nicht die Lösung für diese Frage für sie arbeiten konnte.

Answer 5

Die Verwendung von display: inline-block; in Kombination mit border-bottom kann einige seltsame Verhalten Zeilenumbrüche verursachen, wenn längere Links einen Zeilenumbruch enthalten, siehe http://jsfiddle.net/PQZ9H/. Alternativ können Sie eine Kombination aus background-image und background-position verwenden, die den Vorteil hat, dass der Anzeigewert nicht berührt wird.

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; } 

Ein Nachteil ist, dass Sie einen Hintergrund-Position für jede Schriftart-Größe, die Sie verwenden definieren könnte müssen.

Mit dieser Technik können Sie auch die Grenze von Unterlängen wie g oder y Zugabe

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; } 

und

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

Siehe http://jsfiddle.net/25XNY/1

Answer 6

Margin-Eigenschaft entfernen können nicht die Rand- ändern untere Position, so

Die Höhe des Elements <a> definiert die Position des unteren Rands.

#menu > ul > li > a { 
     height: ; 
}