web-dev-qa-db-fra.com

Rendre la bordure inférieure plus proche du texte

Je tiens à souligner mon menu de navigation, mais le problème est qu’il me faut plus épais et que j’utilise plutôt la bordure inférieure pour pouvoir régler la largeur sur 6 pixels.

Je peux sembler comprendre comment faire en sorte que la bordure apparaisse plus près du texte. Il semble qu'il y ait un écart d'environ 10 pixels entre le texte et la bordure inférieure pour le moment et je ne veux pas en avoir. 

J'ai essayé de positionner une autre div et la positionner par rapport à chaque {li} avec {bottom: 10px} mais je n'arrive pas à le faire fonctionner.

Voici ce que j'ai donc 

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{
}
cssbordermargin
17
Michael

Vous pouvez utiliser une combinaison de line-height et margin pour obtenir un tel effet, comme suit:

#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;
}
17
Andres Ilich

L'utilisation de display: inline-block; en association avec border-bottom peut entraîner des sauts de ligne au comportement étrange si des liens plus longs contiennent un saut de ligne, voir http://jsfiddle.net/PQZ9H/ . Vous pouvez également utiliser une combinaison de background-image et background-position qui présente l'avantage de ne pas toucher à la valeur d'affichage.

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

Un inconvénient est que vous devrez peut-être définir une position d'arrière-plan pour chaque taille de police que vous utilisez.

En utilisant cette technique, vous pouvez également supprimer la bordure des descendeurs comme g ou y en ajoutant

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

et

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

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

5
Jens Draser-Schieb

Essayez de this (Origine russe http://artgorbunov.ru/bb/soviet/20120510/ ) méthodes de l'article (dégradé de fond et 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; }
1
Alex Baumgertner

La propriété de marge ne peut pas changer la position de la bordure inférieure, donc

La hauteur de l'élément <a> définira la position de votre bordure-bas.

 #menu > ul > li > a {
      height: ;
 }
0
Carlos Rafael