CSS3 Unordered List Floating Issue

Question

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

У меня есть два ul в моем html. Я также установил каждый li в float:left в моем css. Причина, по которой я это сделал, состоит в том, что у меня есть четыре столбчатой ​​сетки, и мне нужно было развернуть элементы списка.

Если список не принимает полную ширину моей сетки, следующий список начинается с той же строки.

Пункты одного списка должны оставаться рядный, в то время как целые списки должны показывать друг под другом.

=>https://jsfiddle.net/gugubaight/93xv9tgt/1/

HTML:

<div class="wrapper"> 
    <ul id="tools"> 
    <li> 
     <img> 
    </li> 
    </ul> 

    <ul id="tools"> 
    <li> 
     <img> 
    </li> 
    </ul> 
</div> 

SCSS:

.wrapper { 
     width: 1440px; 
     max-width: 90%; 
    margin: 0 auto; 
} 
ul#tools { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    li { 
     padding: .25rem .25rem 3rem; 
     width: 25%; 
     float: left; 
     -webkit-animation: appear .5s ease-in; 
     animation: appear .5s ease-in; 
     img { 
      width: 350px; 
      max-width: 350px; 
      height: 225px; 
      max-height: 225px; 
      border-radius: 3px; 
     } 
    } 
} 

Я благодарен за каждую помощь!

Answer 1

Возможно, тег h1 создает проблему. Обновление: вот живая скрипка, только структура, которую я сделал для вас. просто удалить поплавком: слева от литий и добавить в свой уль класс или идентификатор

{дисплей: встроенный-Flex;}

его лучше вы сделаете идентификатор класса или если вы хотите идентификатор затем сделать почтительность как инструментов1 и tools2 .. Я сейчас использовать класс

.wrapper { 
     width: 1440px; 
     max-width: 90%; 
    margin: 0 auto; 
} 

ul.tools { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display:inline-flex; 
    li { 
    padding: .25rem .25rem 3rem; 
    width: 25%; 

    -webkit-animation: appear .5s ease-in; 
    animation: appear .5s ease-in; 
    img { 
     width: 350px; 
     max-width: 350px; 
     height: 225px; 
     max-height: 225px; 
     border-radius: 3px; 
    } 

    } 

} 
ul li > .footer{ 
     float:right ; 
    } 

<div class='wrapper'> 
<h1>Recent Tools by my favorite Developers</h1> 
<ul class='tools'> 
    <li> 
    <img src="http://placehold.it/150x100" /> 
    <h2>test </h2> 
    <p>test test test</p> 
    <p><i class="fa fa-user"></i>test</p> 
    <p> <i class="fa fa-tags"></i>test</p> 
    <span class="footer"> 
    <i class="fa fa-star-o"></i> 
    <i class="fa fa-heart active"></i> 
    <i class="fa fa-eye"></i> 
    <i class="fa fa-share"></i> 
    </span> 
</li> 

<ul class='tools'> 
<li> 
    <img src="http://placehold.it/150x100" /> 
    <h2>test </h2> 
    <p>test test test</p> 
    <p><i class="fa fa-user"></i>test</p> 
    <p> <i class="fa fa-tags"></i>test</p> 
    <span class="footer"> 
    <i class="fa fa-star-o"></i> 
    <i class="fa fa-heart active"></i> 
    <i class="fa fa-eye"></i> 
    <i class="fa fa-share"></i> 
    </span> 
</li> 

Счастливое кодирование :)