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.
This question is related to
css
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;
}
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.
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;
}
Here's a good resource for wrapping columned lists. http://www.communitymx.com/content/article.cfm?cid=27f87
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.
add this line in your css file:
.classname ul li {
float: left;
}
Source: Stackoverflow.com