CSS3无序列表浮动问题

这可能是一个很容易回答的问题，但我找不出解决方案。CSS3无序列表浮动问题

我有两个ul在我的HTML。我也在我的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; 
     } 
    } 
}

我对每个帮助感激不尽！

来源

2016-09-17 Gugubaight

它因为你使用相同的ID为两个ul .. ID的r总是需要是唯一的 –

@Mostafa Baezid Ha。我很累，不敢相信我错过了。这并不能解决这个问题:) – Gugubaight

也许h1标签产生问题。更新：这里是现场小提琴，只是我为你做的结构。只是删除浮动：从李离开，并添加到您的UL class和id

{显示：内联柔性;}

其更好您做ID来上课，或者如果你想ID然后做出尊重像工具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>

快乐编码:)

来源

2016-09-17 22:43:49

嗯......这使每个项目都在同一行。 – Gugubaight

所以，如果我有一个列表中的7个项目，他们都在一行 – Gugubaight

nope李宽度25％已经修复 –

CSS3无序列表浮动问题

回答

相关问题