Отзывчивый цвет фона li nav только за словами

49
4

Я пишу отзывчивую навигацию, основанную на HTML-списке.

Целью является nav, который всегда заполняет 100% ширину заголовка, с одинаково широкими ли элементами. Цвет фона отображается только за словами. Он не заполняет весь элемент li, как должен.

Здесь HTML:

<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#" >About Us</a></li>
<li class="sports"><a href="#" >Sports</a></li>
<li class="news"><a href="#" >News & Events</a></li>
<li class="vols"><a href="#" >Volunteer</a>/li>
<li class="donate"><a href="#" >Donate</a></li>
</ul>
</nav>

Здесь CSS:

.mainheader nav {
background-color: #000000;
height: 10%;
}

.mainheader nav ul {
list-style: none;
margin: 0 auto;
padding: 0%;
}
.mainheader nav ul li {
float: left;
display: inline;
width: 14.28%;
padding: 0%;
font-size: 20px;
text-align: center
}

.mainheader nav a:link, .mainheader nav a:visited {
color: #FFF;
display: inline-block;
text-align: 0 auto;
padding: 17.5px 0px 17.5px 0px;
height: 40px
}

.mainheader nav .about a:link, .mainheader nav .about a:visited {
background-color: #7ab503; /* color not hover */
text-shadow: none;
}
.mainheader nav .about a:visited, .mainheader nav .about a:hover {
background-color: #bffc43; /* color hover */
}

/* all the other li elements have the same css structure as the .about one! */

Спасибо за вашу помощь!

спросил(а) 2014-04-22T21:07:00+04:00 5 лет, 10 месяцев назад
1
Решение
77

Код был довольно грязным, поэтому я немного почистил его на этом jsFiddle

HTML:

<header class="mainheader">
<nav>
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#" >About Us</a></li>
<li class="sports"><a href="#" >Sports</a></li>
<li class="news"><a href="#" >News & Events</a></li>
<li class="vols"><a href="#" >Volunteer</a></li>
<li class="donate"><a href="#" >Donate</a></li>
</ul>
</nav>

CSS:

.mainheader nav {
background-color: #000;
text-align:center;
}

.mainheader nav ul {
list-style: none;
margin:0 auto;
padding:0;
}
.mainheader nav ul:after {
content:"";
display:block;
clear:both;

}

.mainheader nav ul li {
display:table-cell;
width:14.28%;
}

.mainheader nav a {
color: #FFF;
display: block;
padding:10px;
line-height: 20px
font-size: 20px;
}

.mainheader nav .about a {
background-color: #7ab503; /* color not hover */
text-shadow: none;
}
.mainheader nav .about a:visited, .mainheader nav .about a:hover {
background-color: #bffc43; /* color hover */
}

В настоящее время все навигаторы имеют центрированные и гибкие кнопки без плавающего кода обмена сообщениями и без гибкой коробки, которая несовместима с IE8

ответил(а) 2014-04-22T23:21:00+04:00 5 лет, 10 месяцев назад
36

Как насчет использования flexbox?

    .mainheader nav ul {
display: flex;
list-style:none;
margin: 0 auto;
padding: 0%;
background: #7ab503;
}

.mainheader nav ul li {
display: block;
flex: 0 1 auto; /* Default */
float:left;
display: inline;
width: 14.28%;
padding: 0% ;
font-size: 20px;
text-align: center;
background: #7ab503;
}

и тогда вы можете играть с цветом фона

ответил(а) 2014-04-22T21:18:00+04:00 5 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема