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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 31388|回复: 18

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

[复制链接]
发表于 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说明都加了,这里省略了。

[[i] 本帖最后由 sdw65063251 于 2007-12-13 11:34 编辑 ]
发表于 2007-12-13 11:13:55 | 显示全部楼层
li  居中 ? 还是里面的内容居中?  text-align:center  ?    li 的数目 可多可少?  为什么不 可能 。 这个程序控制吧。
输出多少条 你还控制?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-13 11:19:13 | 显示全部楼层
是这样的,li在UL中居中,

li的数目偶尔添加,或者减少。
回复 支持 反对

使用道具 举报

发表于 2007-12-13 11:20:49 | 显示全部楼层
li  居中不就是内容的居中么?  text-align 不就好了吗?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-13 11:23:58 | 显示全部楼层
ul{width:800px;}

li在ul中居中。。。。。。。。
回复 支持 反对

使用道具 举报

发表于 2007-12-13 11:28:45 | 显示全部楼层
设置li的宽度,然后margin:0 auto;
回复 支持 反对

使用道具 举报

发表于 2007-12-13 11:28:52 | 显示全部楼层
麻烦楼主说明白点!
回复 支持 反对

使用道具 举报

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

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



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


[[i] 本帖最后由 stubend 于 2007-12-13 11:38 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2007-12-13 11:39:06 | 显示全部楼层
谢谢stubend。非常感谢。
回复 支持 反对

使用道具 举报

发表于 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>
回复 支持 反对

使用道具 举报

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

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



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

[[i] 本帖最后由 sdw65063251 于 2007-12-13 11:45 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2007-12-13 13:26:25 | 显示全部楼层
这种问题通过简单的尝试就能试出来的。
我建议楼主多动手 这样记忆深刻也培养解决问题能力
回复 支持 反对

使用道具 举报

发表于 2007-12-13 14:04:12 | 显示全部楼层
其实,这个问题挺复杂的~
如果给li加背景的话。。。
问题就有点复杂了~
但是可以把整的UL居中在一个div里~
回复 支持 反对

使用道具 举报

发表于 2007-12-13 14:05:02 | 显示全部楼层

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

回复 支持 反对

使用道具 举报

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

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

学习了!
回复 支持 反对

使用道具 举报

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

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



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

使用道具 举报

发表于 2007-12-14 00:12:49 | 显示全部楼层
昨天刚遇到的问题...怎么让li在ul中垂直居中?

难道非要在外面套一个div?
回复 支持 反对

使用道具 举报

发表于 2007-12-14 09:04:59 | 显示全部楼层
不要啊,我上面的例子,第二个就是没套DIV的~
回复 支持 反对

使用道具 举报

发表于 2007-12-14 09:50:08 | 显示全部楼层

不明白

居中有这么复杂吗
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-5-21 18:46 , Processed in 0.093750 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表