CODEWITHSUNDEEP
htmlcsscss-float
Gugubaight
Gugubaight

Reputation: 187

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!

Upvotes: 0

Views: 139

Answers (1)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

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 :)

Upvotes: 1

Related Questions