打印

[求助] 请问:怎样设置<li>并排排列并且居中显示(已解决)

我在CSS中用:float:left;来实现<li>的并排排列,但是在页面看到的效果是靠左对齐了,我想把它居中对齐,要怎样设置??
请各位大侠帮下我这个菜鸟,谢谢!!!

[ 本帖最后由 hesenran 于 2008-5-19 21:47 编辑 ]

TOP

你的意思是做个导航?然后导航在页面里居中?
可以这样
#nav{width:400px; height:30px; margin:0 auto;}
#nav ul,#nav li{margin:0; padding:0;}
#nav li{width:100px; height:29px; border-bottom:1px solid #999;}

<html>
<body>
<div id="nav">
<ul>
<li></li>
<li></li>
<li></li>
<Li></li>
</ul>
</body>
</html>
www.bbgrwhg.cn/blog/index.aspx

TOP

这样的效果是各个<li></li>之间的内容是竖排居中。我是想要实现各个<li></li>之间的内容是横排居中。
请各位大虾赐教!!1

TOP

#nav li{width:100px; height:29px; border-bottom:1px solid #999;text-align:center;}

TOP

li{display:inline}

TOP

li{display:inline;}在浏览器检查错误时,会提示错误的,提示“不支持将inline值用于CSS属性,但是效果还是显示出来了。
不知道这个会有什么影响??

TOP

nav {margin:auto;}
li{float:left;}
这样呢?

TOP

嗯·这个无问题,但是<li></li>的内容都全部左对齐了。。
实现不了并排居中

TOP

是这种效果吗?

 提示:您可以先修改部分代码再运行
[ 本帖最后由 zidanezhicong 于 2008-5-19 19:18 编辑 ]
我爱阿仙奴!

TOP

OK~~多谢拉!!!

TOP

呵呵 学些了~~
icpba.cn

TOP

引用:
原帖由 zidanezhicong 于 2008-5-19 19:17 发表
是这种效果吗?
[html]



无标题文档


*{margin:0; padding:0;}
ul{ list-style:none;}
#nav{width:412px; overflow:hidden;margin:0 auto;}
#nav li{width:100px; height:30px; line-height:30px; bor ...
引用:
你好 你的多加几个li就无效了
建议display:inline
我是这样想的

而你的方法 在固定宽度下是很好的 呵呵
学习```

TOP

引用:
原帖由 chiyuderen 于 2008-5-20 21:03 发表






要看多加多少个li~例如多加1个~那么就把#nav{width:515px}因为原来是412px~多加了1个li!所以就加103px,最后等于515px,103怎么来?1个li定义宽是100px,然后boder左右各1px,加上magrin-right的1px,共100+1+1+1=103px!你看看可以不?

[ 本帖最后由 jinhowe 于 2008-5-20 21:58 编辑 ]

TOP

引用:
原帖由 chiyuderen 于 2008-5-20 21:03 发表






如果用li{display:inline;}在DW检测浏览器支持时,提示错误的,说不支持将“inline"用于CSS属性中,但是效果可以显示出来。
请问这是什么原因,会有什么影响?

TOP

一个自适应的;

 提示:您可以先修改部分代码再运行
我爱阿仙奴!

TOP

呵呵~谢拉。。又学到多点东西!!

TOP