请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

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

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

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

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 求助：如何让LI居中（这次应该说明白了）

发新帖

查看: 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 编辑 ]

西部数码顶级域名注册商39元抢注！

使用道具举报

No01　

咚咚吆

帖子: 5175
体力: 3419
威望: 1

发表于 2007-12-13 11:13:55 |显示全部楼层

li 居中？还是里面的内容居中？ text-align:center ？ li 的数目可多可少？为什么不可能。这个程序控制吧。
输出多少条你还控制？

我已不在江湖江湖还在为了一些破浏览器争论着..

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

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

使用道具举报

harborworkroom　

帖子: 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">

</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 编辑 ]

使用道具举报

帖子: 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 |显示全部楼层

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UL</title>
<style type="text/css">
<!--
body,ul,li{
	padding:0;
	margin:0;
	text-align:center;}

ul{
	text-align:center;
	height:auto;
	background:#8998AF;
	border:1px solid #415266;
	margin:2em auto auto auto;
	width:auto !important;
	width:1px;
	padding:1px;
	clear:both;}

li{
	list-style:none;
	display:block;
	width:auto !important;
	width:1px;
	float:left;
	clear:right;
	border:1px solid #38475E;
	border-bottom-width:2px;
	border-right:none;
	padding:4px 1em;
	white-space:nowrap;
	word-break:keep;
	font-size:12px;
	font-family:"宋体";
	background:#495972;
	color:#CFD3DC;}

.borderR{
	border-right:1px solid #38475E;}
	
.current{
	font-weight:bold;
	background:#6C7C96;}			
-->
</style>
</head>

<body>
<ul>
 <li>主页</li>
 <li class="current">日志</li>
 <li>音乐盒</li>
 <li>相册</li>
 <li>留言板</li>
 <li>迷你屋</li>
 <li>个人档</li>
 <li class="borderR">好友圈好友圈</li>
 <div style="clear:both;"></div>
</ul>
<ul>
 <li>主页</li>
 <li class="current">日志</li>
 <li>音乐盒</li>
 <li>相册</li>
 <li>留言板</li>
 <li>迷你屋迷你屋</li>
 <li>个人档</li>
 <li class="borderR">好友圈好友圈好友圈</li>
 <div style="clear:both;"></div>
</ul>
</body>
</html>

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

使用道具举报

阿里满满

帖子: 92
体力: 230
威望: 0

发表于 2007-12-13 16:40:29 |显示全部楼层

之前也一直在找这个问题的解决方法，终于找到太好了！

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

学习了！

使用道具举报

高级会员 

帖子: 203
体力: 755
威望: 0
居住地: 广东省广州市

发表于 2007-12-13 17:50:50 |显示全部楼层

<!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>UL</title>
<style type="text/css">
<!--
body,ul,li{
	padding:0;
	margin:0;
	text-align:center;}

.box,.nav{	
	text-align:center;
	height:auto;
	border:1px solid #415266;
	margin:2em auto auto auto;
	width:800px ;
	line-height:24px !important;
	line-height:26px;
	padding:1px;
	padding-top:0;
	clear:both;
}

.nav{
	margin:2em auto;}

li{
	list-style:none;
	display:inline;
	width:1px;
	border:1px solid #38475E;
	border-bottom-width:2px;
	border-right:none;
	padding:5px 14px 4px 14px!important;
	padding:4px 12px 4px 12px;
	margin-left:-8px !important;
	margin-left:0;
	white-space:nowrap;
	word-break:keep;
	font-size:12px;
	font-family:"宋体";
	background:#495972;
	color:#CFD3DC;}

.borderR{
	border-right:1px solid #38475E;}
	
.current{
	font-weight:bold;
	background:#6C7C96;}			
-->
</style>
</head>

<body>
<div class="box">
<ul>
 <li>主页</li>
 <li class="current">日志</li>
 <li>音乐盒</li>
 <li>相册</li>
 <li>留言板</li>
 <li>迷你屋</li>
 <li>个人档</li>
 <li class="borderR">好友圈好友圈</li>
 </ul>
</div>
<ul class="nav">
 <li>主页</li>
 <li class="current">日志</li>
 <li>音乐盒</li>
 <li>相册</li>
 <li>留言板</li>
 <li>迷你屋迷你屋</li>
 <li>个人档</li>
 <li class="borderR">好友圈好友圈好友圈</li>
 <div style="clear:both;"></div>
</ul>

</body>
</html>

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

问题解决了，但是好麻烦。。
开始把行高加到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.

回顶部