How to always line up for the top one LI

Asked

Viewed 367 times

0

I would like to know how I do so that these images always stay on the footer of the other.

The ones below should always touch the footer the top in the shape of a li.

Below is the print:

Exemplo

My code is like this:

<style> 
  li { margin-top: 20px; list-style: none; float: left; align-items: top; } 
</style>
<div id="header"> 
   <ul class="tabs">
       <div id="thePic"></div>
   </ul>
</div>
css
  • 1

    Strange, in your CSS posted not have <li> rsrs. But try to take that margin-top of <li>.

1 answer

1

I believe when you say footer that is to say bottom. First, it’s wrong this:

   <ul class="tabs">
       <div id="thePic"></div>
   </ul>

only tag you can have between <ul></ul> is <li></li> To let aligned from the bottom can use display:inline-block; vertical-align:bottom;:

<style> 
  li { margin-top: 20px; list-style: none; display:inline-block; vertical-align:bottom;} 
</style>
<div id="header"> 
   <ul class="tabs">
       <li><img src=""/></li>
       <li><img src=""/></li>
       <li><img src=""/></li>

   </ul>
</div>

example:

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
    vertical-align:bottom;
}

.after-box {
    border: 3px solid red; 
}
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box" style="height:40px">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>
<div class="floating-box">Floating box</div>

learn more about display:inline-block and vertical-align

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.