61,115
社区成员
发帖
与我相关
我的任务
分享这个应该怎么写CSS？
有一个列表：
1.aa ccc bb 2.aaa eee a
3.eee asee a 4.a bb bbb
5.a eeee ceee 6.cccc aee aaaa
我用ul,li写，但每项又合在一起分不出来。
1.aa ccc bb 2.aaa eee a
3.eee asee a 4.a bb bbb
5.a eeee ceee 6.cccc aee aaaa
我用ul,li写，但每项又合在一起分不出来。
<ul>
<li>1.aa ccc bb </li>
<li>2.aaa eee a</li>
<li>3.eee asee a </li>
<li>4.a bb bbb</li>
<li>5.a eeee ceee</li>
<li>6.cccc aee aaaa</li>
</ul>
...全文
请发表友善的回复…
发表回复
Super_Ninja 2011-03-27
- 打赏
- 举报
这个很简单吧，没那么复杂。自己去体会一下就知道了啊！
显然模拟这个只需要设置浮动属性，然后设置行的宽度就可以了。它会自动去计算li的宽度，如果可以放下两个li标签而不够三个li标签的宽度的话就会自动换行了。这样不就实现你要的功能了吗。这样说应该清楚的，你再试试看吧！
显然模拟这个只需要设置浮动属性，然后设置行的宽度就可以了。它会自动去计算li的宽度，如果可以放下两个li标签而不够三个li标签的宽度的话就会自动换行了。这样不就实现你要的功能了吗。这样说应该清楚的，你再试试看吧！
qhdzj87 2011-03-27
- 打赏
- 举报
貌似很麻烦啊！！！
gry214 2011-03-26
- 打赏
- 举报
float:left
雪轩辕 2011-03-26
- 打赏
- 举报
不太明白楼主的意思，能不能把你要表达的页面的内容说明下。
如果仅仅是1-6的排列要求两列一行的话，用列表是正确的，不过你每项内部还要分项而且要求对齐，从语义上说不是应该用表格么？
用CSS的意义是为了使代码符合Web标准，使整个结构更加符合语言性，应该用表格的地方一定要用列表，是不是有点过了……
个人建议而已，没别的意思，勿怪
另，如果是用Table，楼主又希望能够动态的处理列数之类的话，建议使用代码控制输出的HTML，至于是利用后台代码实现动态的输出或是利用Js脚本实现前台信息重排，看楼主具体开发团队的情况了，怎么方便怎么弄。
如果仅仅是1-6的排列要求两列一行的话，用列表是正确的，不过你每项内部还要分项而且要求对齐，从语义上说不是应该用表格么？
用CSS的意义是为了使代码符合Web标准，使整个结构更加符合语言性，应该用表格的地方一定要用列表，是不是有点过了……
个人建议而已，没别的意思，勿怪
另，如果是用Table，楼主又希望能够动态的处理列数之类的话，建议使用代码控制输出的HTML，至于是利用后台代码实现动态的输出或是利用Js脚本实现前台信息重排，看楼主具体开发团队的情况了，怎么方便怎么弄。
paul19835 2011-03-26
- 打赏
- 举报
不会这个，菜鸟一个
xiaoxiaoo7 2011-03-25
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
.list {
margin:0px auto;
font-size:12px;
width:240px;
float:left;
}
.list ul
{
margin:0;
padding:0;
}
.list li
{
float:left;
width:120px;
list-style:none;
}
</style>
</head>
<body>
<div class="list">
<ul>
<li>1.aa ccc bb </li>
<li>2.aaa eee a</li>
<li>3.eee asee a </li>
<li>4.a bb bbb</li>
<li>5.a eeee ceee</li>
<li>6.cccc aee aaaa</li>
</ul>
</div>
</body>
</html>
这样的？
王先生技术栈 2011-03-24
- 打赏
- 举报
想给你写呢，但是看到楼上写了，貌似是对着的，加油
荒牧 2011-03-24
- 打赏
- 举报
<style>
ul, li
{
margin:0;
padding:0;
}
li
{
float:left;
list-style:none;
margin-right:10px;
}
</style>
<div style="float:left;width:100%;">
<ul>
<li>1.aa ccc bb </li>
<li>2.aaa eee a</li>
</ul>
</div>
<div style="float:left;width:100%;">
<ul>
<li>3.eee asee a </li>
<li>4.a bb bbb</li>
</ul>
</div>
<div style="float:left;width:100%;">
<ul>
<li>5.a eeee ceee</li>
<li>6.cccc aee aaaa</li>
</ul>
</div>
ul, li
{
margin:0;
padding:0;
}
li
{
float:left;
list-style:none;
margin-right:10px;
}
</style>
<div style="float:left;width:100%;">
<ul>
<li>1.aa ccc bb </li>
<li>2.aaa eee a</li>
</ul>
</div>
<div style="float:left;width:100%;">
<ul>
<li>3.eee asee a </li>
<li>4.a bb bbb</li>
</ul>
</div>
<div style="float:left;width:100%;">
<ul>
<li>5.a eeee ceee</li>
<li>6.cccc aee aaaa</li>
</ul>
</div>
pb160 2011-03-24
- 打赏
- 举报
加CSS控制~
调试~
调试~
lww851203 2011-03-24
- 打赏
- 举报
ul,li{padding:0px;magin;0px
}
}
div_css 2011-03-23
- 打赏
- 举报
外层设置宽度。li宽度设定一下(小于外层宽度的1/2)，然后float:left;
xiaozhumt 2011-03-23
- 打赏
- 举报
<head>
<style type="text/css">
#outside{
width:302px;
}
#left{
width:150px;
float:left;
margin:auto;
}
#right{
width:150px;
float:left;
margin:auto;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="outside">
<div id="left">
<ul>
<li>1
<ul>
<li>aa</li>
<li>ccc</li>
<li>bb</li>
</ul>
</li>
<li>3
<ul>
<li>ee</li>
<li>asee</li>
<li>a</li>
</ul>
</li>
<li>5
<ul>
<li>a</li>
<li>eeee</li>
<li>aeee</li>
</ul>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>2
<ul>
<li>aa</li>
<li>ccc</li>
<li>bb</li>
</ul>
</li>
<li>4
<ul>
<li>ee</li>
<li>asee</li>
<li>a</li>
</ul>
</li>
<li>6
<ul>
<li>a</li>
<li>eeee</li>
<li>aeee</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
ps:感觉你要的是这个效果吧 总体是一个大的div 内部左右分为两个div 每个分别为一列 内部在进行分列
<style type="text/css">
#outside{
width:302px;
}
#left{
width:150px;
float:left;
margin:auto;
}
#right{
width:150px;
float:left;
margin:auto;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="outside">
<div id="left">
<ul>
<li>1
<ul>
<li>aa</li>
<li>ccc</li>
<li>bb</li>
</ul>
</li>
<li>3
<ul>
<li>ee</li>
<li>asee</li>
<li>a</li>
</ul>
</li>
<li>5
<ul>
<li>a</li>
<li>eeee</li>
<li>aeee</li>
</ul>
</li>
</ul>
</div>
<div id="right">
<ul>
<li>2
<ul>
<li>aa</li>
<li>ccc</li>
<li>bb</li>
</ul>
</li>
<li>4
<ul>
<li>ee</li>
<li>asee</li>
<li>a</li>
</ul>
</li>
<li>6
<ul>
<li>a</li>
<li>eeee</li>
<li>aeee</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
ps:感觉你要的是这个效果吧 总体是一个大的div 内部左右分为两个div 每个分别为一列 内部在进行分列
yu_xiao_chen 2011-03-22
- 打赏
- 举报
说明白点
KK3K2005 2011-03-21
- 打赏
- 举报
[Quote=引用 4 楼 hling 的回复:]
每个li的三列呢？
[/Quote]
根据3楼的意思 推演
li设置float：left
ul的宽度设置成
大于等于 要每列要显示的li的数量*li的宽度
小于 （要每列要显示的li的数量+1）*li的宽度
每个li的三列呢？
[/Quote]
根据3楼的意思 推演
li设置float：left
ul的宽度设置成
大于等于 要每列要显示的li的数量*li的宽度
小于 （要每列要显示的li的数量+1）*li的宽度
hling 2011-03-21
- 打赏
- 举报
每个li的三列呢？
laidezhong 2011-03-21
- 打赏
- 举报
<ul>设定宽度200px
li设定高度，宽度100px，然后float:left
li设定高度，宽度100px，然后float:left
hling 2011-03-21
- 打赏
- 举报
1.aa ccc bb 2.aaa eee a
3.eee asee a 4.a bb bbb
5.a eeee ceee 6.cccc aee aaaa
就是1至6要排成二列，每列里面的字母排成三列,用表格就很好表格套表格
KK3K2005 2011-03-21
- 打赏
- 举报
神马意思？
说明白点
说明白点
