CODEWITHSUNDEEP
htmlhtml-lists
Petr Mensik
Petr Mensik

Reputation: 27526

Elements on multiple rows in HTML list

I have this unordered list

<ul class="list">
  <li>something</li>
  <li>something2</li>
  ....
</ul>

.list {
    list-style: none;
    display: inline;
 }

So far it's good but I am creating a gallery and I would like to have only five images on each row, is there a way how to dynamically achieve this with list? Or should I use table instead?I would prefer the list because I like that you can keep adding new images without worrying that your layout will be broken or changed (without messing with tr and td).

Upvotes: 0

Views: 1303

Answers (2)

iamkarsoft
iamkarsoft

Reputation: 21

well i am just using random width and heights but this can work i think 

ul{
width:100%;
height:500px
}

li{
display:inline-block;
margin:1%;
width:17%;
height:30%;
}

Upvotes: 1

Igor Benikov
Igor Benikov

Reputation: 897

<style>
    .list{list-style: none;}
    .list li{float:left;width:20%;}
</style>

<ul class="list">
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
      <li>something</li>
    </ul>

Upvotes: 1

Related Questions