How to always align to the top an LI

Question

How to always align to the top an LI

Navigation

#1 by (0 votes)

0

I would like to know how I can make these images always stay in footer of the other.

The underneath should always touch the% of the top% in the format of a footer .

Below is the print:

Mycodelookslikethis:

<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

asked by anonymous 17.02.2016 / 15:29

1 answer

Upload php page via FTP but the page does not leave the server cache Error installing apache2

score 0 · Answer 1

I think when you say footer means bottom . First, this is wrong:

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

Only tag that can be between <ul></ul> is <li></li> To leave aligned from the bottom you 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