'Side-by-side list items as icons within a div (css)

I am looking for a way to create a <ul> of items that I can put within a <div> and have them show up side-by-side and wrap to the next line as the browser window is resized.

For example, if we have 10 items in the list that currently show 5 items on the first row and 5 items on the second row, as the user makes the browser window wider, it turns into 6 items on the first row and 4 items on the second row, etc.

I am looking for similar functionality to what Windows Explorer does when in tiles/icons/thumbnails view. I am able to create the <li>'s I want as far as the size, color, content, etc. I am just having trouble with the wrapping/clearing/etc. part.

css


Solution 1:[1]

This can be a pure CSS solution. Given:

<ul class="tileMe">
    <li>item 1<li>
    <li>item 2<li>
    <li>item 3<li>
</ul>

The CSS would be:

.tileMe li {
    display: inline;
    float: left;
}

Now, since you've changed the display mode from 'block' (implied) to 'inline', any padding, margin, width, or height styles you applied to li elements will not work. You need to nest a block-level element inside the li:

<li><a class="tile" href="home">item 1</a></li>

and add the following CSS:

.tile a {
    display: block;
    padding: 10px;
    border: 1px solid red;
    margin-right: 5px;
}

The key concept behind this solution is that you are changing the display style of the li to 'inline', and nesting a block-level element inside to achieve the consistent tiling effect.

Solution 2:[2]

I would recommend that you use display: inline;. float is screwed up in IE. Here is an example of how I would approach it:

<ul class="side-by-side">
  <li>item 1<li>
  <li>item 2<li>
  <li>item 3<li>
</ul>

and here's the css:

.side-by-side {
  width: 100%;
  border: 1px solid black;

}
.side-by-side li {
  display: inline;
}

Also, if you use floats the ul will not wrap around the li's and will instead have a hight of 0 in this example:

.side-by-side li {
  float: left;
}

Solution 3:[3]

CSS 3 flex-flow will do the magic

/* This code will do the magic. */
.flex-container {
  display: flex;
  flex-flow: row wrap;
}

/* This code is just to style the inner div elements. */
.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

Solution 4:[4]

Use the following code to float the items and make sure they are displayed inline.

ul.myclass li{float:left;display:inline}

Also make sure that the container you put them in is floated with width 100% or some other technique to ensure the floated items are contained within it and following items below it.

Solution 5:[5]

I used a combination of the above to achieve a working result; Change float to Left and display Block the li itself HTML:

<ol class="foo">
    <li>bar1</li>
    <li>bar2</li>
</ol>

CSS:

.foo li {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 2px;
}

Solution 6:[6]

add this line in your css file:

.classname ul li {
    float: left;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 mlunoe
Solution 3 Shiva Srikanth Thummidi
Solution 4
Solution 5 Pranav Singh
Solution 6 Pran

Related Questions