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

Question

I am looking for a way to create a

of items that I can put within a
and have them show up side-by-side and wrap to the next
相关标签:

Answer 1

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;
}

Answer 2

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

Answer 3

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.

Answer 4

Here's a good resource for wrapping columned lists. http://www.communitymx.com/content/article.cfm?cid=27f87

Answer 5

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.

Answer 6

add this line in your css file:

.classname ul li {
    float: left;
}