Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 290
Brian David Berman Avatar asked May 06 '09 01:05

Brian David Berman


People also ask

How do I put icons side by side in CSS?

Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side. float:right; This property is used for those elements(div) that will float on right side.

How do you place UL side by side?

To change the direction of the list, we target the unordered list element using the “ul” CSS selector. Next, we add the CSS list-style property and set the value to none. This effectivity removes the bullets on the list items. Secondly, we will now target the list items within the unordered list.

How do I align items next to each other in a div?

With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.


2 Answers

Give the <li> float: left (or right)

They will all be in the same line until there will be no more room in the container (your case, a <ul>). (forgot): If you have a block element after the floating elements, he will also stick to them, unless you give him a clear: both;, OR put an empty div before it with clear: both;

like image 121
Itay Moav -Malimovka Avatar answered Sep 23 '22 18:09

Itay Moav -Malimovka


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.

like image 29
johnvey Avatar answered Sep 22 '22 18:09

johnvey