请选择 进入手机版 | 继续访问电脑版
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

万元奖励等你拿——点点网模板设计大赛 第一季积分兑换活动 联系招聘客服 蓝色理想帮你找工作!

查看: 7504|回复: 18

[求助] 求助:如何让LI居中(这次应该说明白了) [复制链接]

sdw65063251 楼主

完全米撒了米

银牌会员 手机认证 

帖子
693
体力
1298
威望
0
发表于 2007-12-13 11:05:57 |显示全部楼层
<style type="text/css">li{float:left;}</style>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
如何让li居中?li中的文字可多可少,li的个数可多可少,可能吗?最好不用伪类。 请教啊~~

我觉得我太吃力了,我表达能力太难了,重新说一下。。
css:
div{width:600px; margin:0 auto;}
ul{width:500px;}
li{float:left; margin:0 10px; display:inline;}
html:
<body>
<div>
<ul>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
</ul>
</div>
<body>
如何让li在ul中局中 这次我觉得我表达的可以了吧。。。

声明和dtd说明都加了,这里省略了。

[ 本帖最后由 sdw65063251 于 2007-12-13 11:34 编辑 ]
No01 

咚咚吆

金牌会员

帖子
5175
体力
3419
威望
1
发表于 2007-12-13 11:13:55 |显示全部楼层
li  居中 ? 还是里面的内容居中?  text-align:center  ?    li 的数目 可多可少?  为什么不 可能 。 这个程序控制吧。
输出多少条 你还控制?
我已不在江湖 江湖还在为了一些破浏览器争论着..
sdw65063251 楼主

完全米撒了米

银牌会员 手机认证 

帖子
693
体力
1298
威望
0
发表于 2007-12-13 11:19:13 |显示全部楼层
是这样的,li在UL中居中,

li的数目偶尔添加,或者减少。
No01 

咚咚吆

金牌会员

帖子
5175
体力
3419
威望
1
发表于 2007-12-13 11:20:49 |显示全部楼层
li  居中不就是内容的居中么?  text-align 不就好了吗?
我已不在江湖 江湖还在为了一些破浏览器争论着..
sdw65063251 楼主

完全米撒了米

银牌会员 手机认证 

帖子
693
体力
1298
威望
0
发表于 2007-12-13 11:23:58 |显示全部楼层
ul{width:800px;}

li在ul中居中。。。。。。。。
woou 
帖子
876
体力
1667
威望
3
发表于 2007-12-13 11:28:45 |显示全部楼层
设置li的宽度,然后margin:0 auto;
满脑子蜘蛛网的web菜鸟~~有博客啦wooulive.com
帖子
43
体力
163
威望
0
居住地
广东省 广州市
发表于 2007-12-13 11:28:52 |显示全部楼层
麻烦楼主说明白点!
cnidea.net
帖子
203
体力
755
威望
0
居住地
广东省 广州市
发表于 2007-12-13 11:36:14 |显示全部楼层

 提示:您可以先修改部分代码再运行



 提示:您可以先修改部分代码再运行


[ 本帖最后由 stubend 于 2007-12-13 11:38 编辑 ]
sdw65063251 楼主

完全米撒了米

银牌会员 手机认证 

帖子
693
体力
1298
威望
0
发表于 2007-12-13 11:39:06 |显示全部楼层
谢谢stubend。非常感谢。

鬼谷子

高级会员

帖子
537
体力
819
威望
1
发表于 2007-12-13 11:39:41 |显示全部楼层
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
div{width:600px; margin:0 auto;}
ul{width:800px; border:1px solid #000066; height:25px; text-align:center; line-height:25px;}
li{margin:0 10px; display:inline;}
-->
</style>
</head>
<body>
<div>
<ul>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
<li>12</li>
</ul>
</div>
</body>
</html>
sdw65063251 楼主

完全米撒了米

银牌会员 手机认证 

帖子
693
体力
1298
威望
0
发表于 2007-12-13 11:42:35 |显示全部楼层

 提示:您可以先修改部分代码再运行



关键是要转换成为内联对象是吗? 谢谢大家~

[ 本帖最后由 sdw65063251 于 2007-12-13 11:45 编辑 ]
yangwo 
帖子
263
体力
1043
威望
0
发表于 2007-12-13 13:26:25 |显示全部楼层
这种问题通过简单的尝试就能试出来的。
我建议楼主多动手 这样记忆深刻也培养解决问题能力
i593.com
帖子
203
体力
755
威望
0
居住地
广东省 广州市
发表于 2007-12-13 14:04:12 |显示全部楼层
其实,这个问题挺复杂的~
如果给li加背景的话。。。
问题就有点复杂了~
但是可以把整的UL居中在一个div里~
帖子
203
体力
755
威望
0
居住地
广东省 广州市
发表于 2007-12-13 14:05:02 |显示全部楼层

 提示:您可以先修改部分代码再运行

阿里满满

中级会员

帖子
92
体力
230
威望
0
发表于 2007-12-13 16:40:29 |显示全部楼层
之前也一直在找这个问题的解决方法,终于找到太好了!

关键还是给LI设置了display:inline,让其删除了行属性。
然后UL设置了文字居中,自然一切都OK了。

学习了!
帖子
203
体力
755
威望
0
居住地
广东省 广州市
发表于 2007-12-13 17:50:50 |显示全部楼层

 提示:您可以先修改部分代码再运行



问题解决了,但是好麻烦。。
开始把行高加到li里去了,不管怎样li的高度都充不开。

mxclion

银牌会员 手机认证 

帖子
825
体力
1479
威望
0
居住地
河南省 洛阳市
发表于 2007-12-14 00:12:49 |显示全部楼层
昨天刚遇到的问题...怎么让li在ul中垂直居中?

难道非要在外面套一个div?
不在放荡中变坏,就在沉默中变态...
帖子
203
体力
755
威望
0
居住地
广东省 广州市
发表于 2007-12-14 09:04:59 |显示全部楼层
不要啊,我上面的例子,第二个就是没套DIV的~
帖子
37
体力
82
威望
0
发表于 2007-12-14 09:50:08 |显示全部楼层

不明白

居中有这么复杂吗
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-1-21 17:09 , Processed in 0.298208 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部