Faire De La Bordure Inférieure De Plus Près Au Texte

Je tiens à souligner mon menu de navigation, mais le problème est que j'ai besoin qu'il soit plus épais donc je suis en utilisant la bordure en bas au lieu de cela, afin que je puisse régler la largeur de 6px.

Je peux paraître à comprendre comment obtenir de la frontière pour paraître plus proche du texte. Il semble à propos d'un 10px écart entre le texte et le fond-frontière à l'instant et je ne veux pas en avoir.

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

Voici ce que j'ai si

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

InformationsquelleAutor Michael | 2012-04-12

Vous pouvez utiliser un mélange de line-height et margin à susciter 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;
}

Pas bon pour un texte placé 2 lignes, et plus

InformationsquelleAutor Andres Ilich

5

À l'aide de display: inline-block; en combinaison avec border-bottom pourrait causer le comportement bizarre des sauts de ligne si plus de liens contiennent un saut de ligne, voir http://jsfiddle.net/PQZ9H/. Sinon, vous pouvez utiliser une combinaison de background-image et background-position qui a 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 pourriez avoir à définir un background-position pour chaque taille de police que vous utilisez.

À l'aide de cette technique, vous pouvez également supprimer la frontière de jambages comme g ou y ajouter
```
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
- J'ai trouvé que, de toutes les différentes options, à l'aide d'une image de fond d'écran est de loin le meilleur. Aussi, en utilisant em unités au lieu de pixels, vous n'avez pas à vous soucier de la taille de police. Par exemple background-position: 0 1.05em;
- Si nous avons besoin d'une couleur différente, accédez à PNG Pixel TRANSPARENT BASE64 PNG PIXEL GÉNÉRATEUR.
InformationsquelleAutor Jens Draser-Schieb

Essayer de cette (d'origine russe http://artgorbunov.ru/bb/soviet/20120510/) de l'article méthodes (dégradé d'arrière-plan 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; }

InformationsquelleAutor Alex Baumgertner

0

Marge de la propriété ne peut pas changer le bas de la bordure de la position, de sorte

La hauteur de la <a> élément ne permet de définir la position de la frontière-bas.
```
 #menu > ul > li > a {
      height: ;
 }
```
InformationsquelleAutor Carlos Rafael
-2

eu un problème similaire à la question d'origine.
De ses été la réponse ici: https://stackoverflow.com/questions/18180490/move-border-bottom-closer-to-text

La solution ci-dessus peut aider d'autres personnes qui ne pouvaient pas obtenir la solution à cette question de travailler pour eux.
- Ce lien est mort. Ne vous arrive de rappeler la solution?
InformationsquelleAutor Angelique Wu
-3

Essayez d'ajouter ceci:
```
padding-bottom: 5px;
```
à
```
#menu ul li a{
```
- Merci pour la réponse. J'ai essayé ce que vous avez suggéré de mettre seulement les forces de la frontière plus loin dans le texte.
- Essayez de rendre un nombre négatif
- Négatif le rembourrage ne fait rien.
InformationsquelleAutor Greg B

Vous devez vous connecter pour publier un commentaire.