源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 524|回复: 19

[CSS/HTML] 在解决ul居中问题时想到的几点

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2007-9-9 21:45:10 | 显示全部楼层 |阅读模式
最近在做网站的时候碰到了一个问题:我用 ul 标签和 li 标签构建的导航栏想要在不确定 li 数量和 li, ul 宽度的情况下居中,但是给 ul 使用了 text-align:center 之后却没有起到应有的效果。

原来的页面结构是:

复制代码 代码如下:
<div id="menu"> 
  <ul class="menu_ul"> 
    <li class="menu_li"><a href="#">Firede</a></li> 
    <li class="menu_li"><a href="#">Style5</a></li> 
  </ul> 
</div> 

样式表结构是:

复制代码 代码如下:
<style> 
#menu{...} 
.menu_ul{...} 
.menu_li{...} 
</style> 

这样本来也是没有什么问题的,但是因为要实现一个功能却定义了一个ID(menu)和两个CLASS(menu_ul, menu_li),这样CSS文件就臃肿了。

我之所以搞不定 ul 居中的问题,就是因为 CSS 写的太乱太多,到最后一环套一环,自己都糊涂了,定义结构的代码混杂在各种为了显示效果而写的代码之中,于是便写乱了。

在大脑发晕的情况下,不想修改了,于是重新写了实现以上功能的代码,页面结构:

复制代码 代码如下:
<div id="menu"> 
  <ul> 
    <li><a href="#">Firede</a></li> 
    <li><a href="#">Style5</a></li> 
  </ul> 
</div> 

完整的样式表:

复制代码 代码如下:
<style> 
#menu {text-align:center;} 
#menu ul {padding:0;margin:0;} 
#menu li {display:inline;padding:0 10px;} 
</style> 

像这样,很简单的就解决了 ul 不能居中的问题。回头检查我的代码,原来是因为在 li 的样式里多加了一句 float:left,因为定义的 display 并不是 block,而是 inline,所以并不能浮动,造成了冲突,最终导致 ul 无法居中显示。

总结一下,在写网页结构的时候,最好同一个功能模块使用相对统一的CSS名。如果可以定义一个样式名解决问题的,尽量不要定义多个,代码也要尽量简洁。因为代码臃肿了就很容易出问题,并且很难发现错误在什么地方。多用些像 menu, menu ul, menu li, menu a, menu a:hover 这种一系列的样式,而不是定义一些像 menu, menu_ul, menu_ul_li 这样看似调理清晰、层次鲜明,但是实际上很混乱的名称。

习惯是以往经验在潜意识中总结出的精华,但是随着技术的进步,很多以往的习惯都成为进一步提高的阻碍,这时候就要多参考一下标准了,看看以往的习惯是不是值得坚持下去。做网站也一样,标准是能够提高效率、改善性能并且指明方向的,Web标准化的设计更有助于我们提高维护网站的效率。
回复

使用道具 举报

0

主题

2万

回帖

66

积分

注册会员

Rank: 2

积分
66
发表于 2022-8-13 09:15:03 | 显示全部楼层
飞飞飞飞飞飞飞飞飞飞飞飞飞
回复 支持 反对

使用道具 举报

11

主题

2万

回帖

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2022-9-3 02:57:19 | 显示全部楼层
那三门,你们谁寂寞才快乐撒
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2022-11-20 11:36:28 | 显示全部楼层
554411515451555
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-21 15:38:25 | 显示全部楼层
我找了挺久终于找到了
回复 支持 反对

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2023-1-3 20:51:03 | 显示全部楼层
天天源码论坛
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-6-30 17:43:41 | 显示全部楼层
啊,数码撒飒飒飒飒
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-9-22 05:11:28 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

207

积分

中级会员

Rank: 3Rank: 3

积分
207
发表于 2023-10-28 10:59:57 | 显示全部楼层
挺不错的东西
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-12 10:24:31 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-10 17:08 , Processed in 0.131600 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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