Gugubaight Gugubaight - 2 months ago 10
CSS Question

CSS3 Unordered List Floating Issue

This is possibly an easy to answer question, but I can't figure out a solution.

I have two

ul
in my html. I also set each
li
to
float:left
in my css. The reason I did that is because I have a four column grid and I needed to layout the list items.

If a list don't take the full width of my grid, the following list begins at the same line.



The Items of one list should stay inline, while the whole lists should display below each other.

=> 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;
}
}
}


I am grateful for each help!

Answer

Maybe the h1 tag creating the problem. Update: here is the live fiddle just the structure I made for you. just remove float: left from li and add into your ul class or id

{display: inline-flex;}

its better you make id to class or if you want id then make deference like tools1 and tools2 .. I for now use class

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

Happy coding :)

Comments