html - CSS3无序列表 float 问题

Question

这可能是一个容易回答的问题，但我想不出解决办法。

我的 html 中有两个 ul。我还在我的 css 中将每个 li 设置为 float:left。我这样做的原因是因为我有一个四列网格，我需要对列表项进行布局。

如果列表没有占据我的网格的全部宽度，则以下列表从同一行开始。

一个列表的元素应保持内联，而整个列表应显示在彼此下方。

=> 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 标签造成了问题。 更新:这里是现场 fiddle ，就是我为你制作的结构。 只需从 li 中删除 float: left 并添加到您的 ul 类或 id

{显示:内联柔性；}

最好将 id 添加到类中，或者如果你想要 id，则像 tools1 和 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>

快乐编码:)