CODEWITHSUNDEEP
csszurb-foundationzurb-foundation-5
panthro
panthro

Reputation: 24059

Align images inside a li

I have a list with images in. The list is a centered column in foundation.

Fiddle

I need it so that the list elements images are all aligned in the same 'row' rather than going down the page.

How can I do this? I've tried:

li{
     display: inline;   
}

But no luck.

Upvotes: 0

Views: 88

Answers (3)

robjez
robjez

Reputation: 3788

Firstly - you need to remove "li" css being nested inside ul. Then, having li width set to some certain size, and adding display: inline-block; to li's css should do the job.
It has greater universal browser support in opposition to inline-flex (if you're about to have a support for IE9 and below):

HTML: 

<div class="row">
    <ul class="small-4 medium-6 small-centered columns">
        <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
         <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
         <li><img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare"/></li>
    </ul>

</div>

CSS: 

ul {
    list-style: none; 
}
li {
      display: inline-block;
      width:30%;
      margin-right: -4px;
}
img {
    border: 1px solid black;
}

JSFiddle

Upvotes: -1

Raja Khoury
Raja Khoury

Reputation: 3195

You can give the ul and li a fixed size or % based width and use for lists a display:inline-block 

#myUL{
    list-style: none;
    width: 100%;
    position: relative;
    display:block;
    float:none;
    padding: 0;
    margin: 0;

}
li{
    width: 32.5%;
    position: relative;
    margin: 0px;
    line-height: 14px;
    display: inline-block;
}
}

img{
    border: 1px solid black;
    position:relative;
    width:100%;
}

Jsfiddle

Upvotes: 0

Tushar Gupta
Tushar Gupta

Reputation: 15923

Add display: inline-flex to your ul

ul {
  list-style: none;
  display: inline-flex;
}
img {
  border: 1px solid black;
}
<div class="row">
  <ul class="small-4 medium-6 small-centered columns">
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
    <li>
      <img src="http://api.ning.com/files/yallYWJbJ*ZVuc1yUMGYuXL4artVmJUl*Uuzcv2prT67gOy0nNVLPjrRE1GYTasJCNYmjgeSTgORbhuGbyRpcsaQbL1nvAPk/GreenSquare" />
    </li>
  </ul>

</div>

Upvotes: 4

Related Questions