HTML-градиенты и классы CSS

Question

Для задания мне нужно создать небольшой веб-сайт, я хотел бы создать навигатор, в котором весь градиент прошел. Но когда я добавляю его, у меня есть место, где есть слова.

Как я могу сделать это через весь бар?

.navlist { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    height: auto; 
 
    padding: 15px; 
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0); 
 
} 
 
.navlist li { 
 
    float: right; 
 
    width: 16.666%; 
 
}

<ul class="navlist"> 
 
    <li><a href="What'son.html">What's on</a></li> 
 
    <li><a href="History.html">History</a></li> 
 
    <li><a href="specialoffers.html">Special offers</a></li> 
 
    <li><a href="contactus.html">contat us</a></li> 
 
    <li><a href="otherstores.html">other stores</a></li> 
 
</ul>

Answer 1

Какой из плавали li elements.A общей проблемы с плавающей точкой на основе макетов является то, что контейнер поплавков не хочет, чтобы растянуть до размещения поплавков Reference .Put overflow:auto or hidden к родительскому элементу, который имеет плавающие элементы или попробовал взломать clearfix. Вот ваш сниппет

.navlist { 
 
    list-style-type: none; 
 
    width: 100%; 
 
    padding: 15px; 
 
    overflow:hidden; 
 
    margin:0; 
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(91, 91, 91, 1))); 
 
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(91, 91, 91, 1) 100%); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#5b5b5b', GradientType=0); 
 
} 
 
.navlist li { 
 
    float: right; 
 
    width: 16.666%; 
 
}

<ul class="navlist"> 
 
    <li><a href="What'son.html">What's on</a></li> 
 
    <li><a href="History.html">History</a></li> 
 
    <li><a href="specialoffers.html">Special offers</a></li> 
 
    <li><a href="contactus.html">contat us</a></li> 
 
    <li><a href="otherstores.html">other stores</a></li> 
 
</ul>

Answer 2

Вы должны добавить поплавок слева .navlist, потому что вы используете поплавок прямо на литий.

Вы также можете использовать:

.navlist li{ 
display:inline; 
width:16.666%; 
margin: 0 5%; /*it depends on what margin you want*/ 
}