如何制作<ul>这样的列表?</ul>

时间:2010-07-08 14:57:28

标签: css xhtml

我是新的网页设计师并制作了一个网站,其中包含此列表

看到这个图片(我无法添加有问题的图片,bcoz我需要10个代表)

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

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

如果我想保留一个<ul>,如何制作这样的列表?有可能吗?

3 个答案:

答案 0 :(得分:5)

可以浮动所有li元素,并设置ul和li元素的宽度。显示顺序为
1 2
3 4
5 6
如果你使用这种方法。

答案 1 :(得分:1)

这是你可以用来完成greg0ire所说的最简单的CSS:

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

当然,如上所述,这不会创建类似报纸列的格式。在弹出之前,IT将从左向右浮动。

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

在较新版本的Firefox中,这样的CSS可能会起作用:

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

答案 2 :(得分:0)

选中此项以执行多列列表: http://www.alistapart.com/articles/multicolumnlists/

对于自定义项目符号,您需要修改的特定样式属性为:

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

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

找到名为“标记”的部分。