如何制作这样的列表?

I'm new web Designer and making a site, which has list like this

我是一个新网页设计师，正在制作一个网站，上面有这样的列表

See this image ~~( i can't add image in question, bcoz i need 10 rep)~~

看到这个图像(我不能添加有问题的图像，因为我需要10个代表)

~~http://shup.com/Shup/379626/11068201228-My-Desktop.png~~

http://shup.com/Shup/379626/11068201228-My-Desktop.png

alt text http://stashbox.org/947532/11068201228-My-Desktop.png

alt文本http://stashbox.org/947532/11068201228-My-Desktop.png

How to make list like this if i want to keep one <ul> Is it possible?

如果我想要保持一个

3 个解决方案

#1

It is possible by floating all your li elements, and setting the width of your ul and li elements. The display order will be
1 2
3 4
5 6
if you use this method.

通过浮动所有的li元素，并设置ul和li元素的宽度，这是可能的。如果您使用这种方法，显示顺序将是1 2 3 4 5 6。

#2

Here's the simplest CSS you can use to accomplish what greg0ire is talking about:

这里有一个最简单的CSS，你可以用来完成greg0ire所说的:

<ul class='myList'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.myList { width : 300px; }
.myList li { float: left; width: 150px; }

Of course, as mentioned this will not create a newspaper-column-like format. IT will float left to right before popping down.

当然，如前所述，这不会创建一个类似于报纸栏的格式。它会从左到右浮动，然后弹出。

For multi-column formats, you'd have to either use a device which supports CSS3 or use javascript.

对于多列格式，您必须使用支持CSS3的设备或使用javascript。

In newer versions of Firefox, CSS like this may work:

在更新版本的Firefox中，像这样的CSS可能会起作用:

.myList{
  -moz-column-count:3;
}

#3

Check this out to do multi-column lists: http://www.alistapart.com/articles/multicolumnlists/

看看这个，做多列列表:http://www.alistapart.com/articles/multiolumnlists/

For the custom bullets, specific style property you need to modify is:

对于自定义子弹，需要修改的具体样式属性为:

list-style-image: url(someimage.gif);

Check out this link for more detailed info: http://www.alistapart.com/articles/taminglists/

请查看此链接以获取更详细的信息:http://www.alistapart.com/articles/taminglists/。

find the section called "Markers".

找到“标记”一节。

#1