Динамическая длина границы в навигационном меню css

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

Ниже приведен код, который я использую.

HTML-код

<nav>
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="About.html">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Client Area</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>

CSS-код

ul{
    list-style:none;
}

nav li {
    float:left;
}

nav {
    float:right;
    margin-top: -3%;
}

nav a {
    display:block;
    width: 120px;
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

В классе a.active я пробовал такие вещи, как width:100%; border-width: 100%; и a.active border {width;100%;}. Однако ни один из них не работал.


html css border
person Harry12345    schedule 12.09.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуйте изменить css для «nav a», удалив ширину и вместо этого указав поле, например: -

nav a {
display: block;
margin: 0 20px;
text-align: center;
text-decoration: none;
color: #134BA0;
font-size: 22px;
}
person Sujata Chanda    schedule 12.09.2013

arrow_upward
0
arrow_downward

Используйте этот CSS:

ul{
    list-style:none;
}

nav li {
    float:left;
    width: 120px;
}

nav {
    float:right;
    margin-top: -3%;
}

nav li a {
    text-align:center;
    text-decoration:none;
    color:#134BA0;
    font-size: 22px;
}

nav a:hover {
    color:#387CE1;
}

nav li a.active {
    font-weight:bold;
    border-bottom: #387CE1 solid 2px;
}

В основном я устанавливаю ширину на li и удаляю блок отображения на a

person markvicencio    schedule 12.09.2013