ansaurus

Question

Answer 1

+2 A:

ul {
  list-style: none;
  overflow: hidden;
}

ul li {
  width: 200px;
  height: 50px;
  margin-right: 15px;
  float: left;
}

Although note that with this you will get the lis in this order:

1  2  3
4  5  6

Edit:

Well that's slightly more difficult. If you can live with the lack of browser support you can use the CSS3 column property.

http://www.jsfiddle.net/ns5pd/1/

Yi Jiang 2010-08-16 13:07:14

Thanks for your answer, but it's not how i want it. I already knew how to do it that way.

Mikkel 2010-08-16 13:18:51

Uh... then why ask? Or do you want the `li` s in the specific order you wanted?

Yi Jiang 2010-08-16 13:23:22

Yes, that's why i made the preview like that.

Mikkel 2010-08-16 13:29:39

Answer 2

A:

Pretty easily by floating them within their <ul>. The width set on the ul is to set them up in the same grid pattern as your screenshot.

ul {
    width: 330px;
    margin: 0;
    padding: 0;
    list-style: none;
}

ul li {
    float: left;
    margin: 5px;
    width: 100px;
    height: 100px;
    background: red;
}

In action here.

Pat 2010-08-16 13:07:46

Thanks for your answer, but it's not how i want it. I already knew how to do it that way.

Mikkel 2010-08-16 13:17:28

Answer 3

A:

Here's an example that uses negative margins:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>Title</title>
<style type="text/css">
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul li {
        margin: 5px;
        height: 100px;
        width: 100px;
        background: red;
        float: left;
    }

    ul li.negMarg {
      margin-top: 120px;
      margin-left: -106px;
      background: blue;
    }

</style>
</head>

<body>
<ul>
  <li>1</li>
  <li class="negMarg">2</li>

  <li>3</li>
  <li class="negMarg">4</li>

  <li>5</li>
  <li class="negMarg">6</li> 
</ul>
</body>

</html>

Psy 2010-08-16 13:57:23

That isn't valid HTML. The only element that `ul` and `ol` can contain is `li`

Yi Jiang 2010-08-16 14:06:55

I just added a new code sample.

Psy 2010-08-16 14:35:18

Well that's an option, but isn't there a more elegant method? It's kind of annoying to add a class to every second list-item. :nth-child(even) is not an option, cause it's not cross-browser compatible.

Mikkel 2010-08-16 16:47:47

Answer 4

A:

If you don't mind javascript you could use the jQuery :nth-child Selector. The link contains a nice example of a situation similar to yours.

Psy 2010-08-16 17:49:09

ansaurus

tags:

views:

answers:

Control list-item float position

related questions