Сделать нижнюю границу ближе к тексту

Я хочу подчеркнуть мое меню навигации, но проблема в том, что мне нужно, чтобы он был толще, поэтому я использую нижнюю границу, чтобы я мог установить ширину в 6 пикселей.

Я могу понять, как заставить границу приблизиться к тексту. Кажется, что разрыв между текстом и нижней границей в настоящий момент составляет 10px, и я не хочу иметь его.

Я попытался позиционировать другой div и поместить его относительно каждого {li} с {bottom: 10px}, но я не могу заставить его работать.

Вот что у меня такое

КОД

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

Ответы

Ответ 1

Вы можете использовать смесь 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;
}

Ответ 2

Использование 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; }

Недостатком является то, что вам может потребоваться определить фоновое положение для каждого используемого вами размера шрифта.

Используя эту технику, вы также можете удалить границу из descenders, например 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

Ответ 3

Попробуйте this (origin russian 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; }

Ответ 4

Свойство Margin не может изменить положение нижнего края, поэтому

Высота элемента <a> будет определять положение вашего нижнего края.

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

Ответ 5

Попробуйте добавить это:

padding-bottom: 5px;

к

#menu ul li a{

Ответ 6

имел аналогичную проблему с исходным вопросом. На нем был дан ответ: fooobar.com/info/305219/...

Вышеприведенное решение может помочь другим, кто не может решить, как решить этот вопрос для них.