Question

这可能是一个容易回答的问题，但我无法找到解决方案。

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

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

一个列表中的项目应保持内联，而整个列表应显示在彼此之下。

=＆GT; 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标签会产生问题。更新：这是现场小提琴，只是我为你制作的结构。只需从li中删除float：left并添加到你的ul类或id

中

{display：inline-flex;}

你做得更好你上课或者如果你想要id然后像工具1和工具2一样做我的尊重..我现在用的是

.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>

快乐编码:)

CSS3无序列表浮动问题

1 个答案: