打印

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

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

1^# 大中小发表于 2008-5-18 13:42

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

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

TOP

jiangxin85

燃烧的海平面
高级会员

帖子: 476
体力: 546
威望: 0
当前: 北京海淀区
离线: 1 天

发短消息

专长 前端制作,.NET,UE

2^# 大中小发表于 2008-5-19 13:25

你的意思是做个导航？然后导航在页面里居中？
可以这样
#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

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

3^# 大中小发表于 2008-5-19 15:30

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

TOP

design361

初级会员

帖子: 24
体力: 55
威望: 0
当前: 北京东城区
离线: 2 天

发短消息

4^# 大中小发表于 2008-5-19 15:51

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

TOP

cainiao555

Flyxiang87
中级会员

帖子: 138
体力: 298
威望: 0
当前: 广东深圳
离线: 27 天

5^# 大中小发表于 2008-5-19 15:53

li{display:inline}

TOP

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

6^# 大中小发表于 2008-5-19 16:35

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

TOP

tudou527

地瓜
中级会员

帖子: 108
体力: 199
威望: 1
当前: 河北邢台
离线: 6 天

发短消息

7^# 大中小发表于 2008-5-19 18:08

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

TOP

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

8^# 大中小发表于 2008-5-19 19:05

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

TOP

zidanezhicong

我爱阿仙奴
高级会员

帖子: 408
体力: 815
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

9^# 大中小发表于 2008-5-19 19:17

是这种效果吗？

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

[ 本帖最后由 zidanezhicong 于 2008-5-19 19:18 编辑 ]

我爱阿仙奴！

TOP

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

10^# 大中小发表于 2008-5-19 21:46

OK~~多谢拉！！！

TOP

joinzw

新手上路

帖子: 19
体力: 36
威望: 0
当前: 湖北武汉
离线: 46 天

11^# 大中小发表于 2008-5-19 23:20

呵呵学些了~~

icpba.cn

TOP

chiyuderen

amot
银牌会员

帖子: 488
体力: 1011
威望: 0
当前: 上海普陀
离线: 2 天

发短消息

12^# 大中小发表于 2008-5-20 21:03

引用:

原帖由 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

jinhowe

初级会员

帖子: 88
体力: 152
威望: 0
离线: 5 天

发短消息

13^# 大中小发表于 2008-5-20 21:54

引用:

原帖由 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

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

14^# 大中小发表于 2008-5-21 08:36

引用:

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

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

TOP

zidanezhicong

我爱阿仙奴
高级会员

帖子: 408
体力: 815
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

15^# 大中小发表于 2008-5-21 10:02

一个自适应的；

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

我爱阿仙奴！

TOP

hesenran [楼主]

初级会员

帖子: 29
体力: 69
威望: 0
当前: 广东肇庆
离线: 2 天

发短消息

16^# 大中小发表于 2008-5-21 11:28

呵呵～谢拉。。又学到多点东西！！

TOP