在解决ul居中问题时想到的几点_ Div+Css教程-查字典教程网
在解决ul居中问题时想到的几点
在解决ul居中问题时想到的几点
发布时间:2016-12-29 来源:查字典编辑
摘要:最近在做网站的时候碰到了一个问题:我用ul标签和li标签构建的导航栏想要在不确定li数量和li,ul宽度的情况下居中,但是给ul使用了tex...

最近在做网站的时候碰到了一个问题:我用ul标签和li标签构建的导航栏想要在不确定li数量和li,ul宽度的情况下居中,但是给ul使用了text-align:center之后却没有起到应有的效果。

原来的页面结构是:

复制代码 代码如下:

<divid="menu">

<ulclass="menu_ul">

<liclass="menu_li"><ahref="#">Firede</a></li>

<liclass="menu_li"><ahref="#">Style5</a></li>

</ul>

</div>

样式表结构是:

复制代码 代码如下:

<style>

#menu{...}

.menu_ul{...}

.menu_li{...}

</style>

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

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

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

复制代码 代码如下:

<divid="menu">

<ul>

<li><ahref="#">Firede</a></li>

<li><ahref="#">Style5</a></li>

</ul>

</div>

完整的样式表:

复制代码 代码如下:

<style>

#menu{text-align:center;}

#menuul{padding:0;margin:0;}

#menuli{display:inline;padding:010px;}

</style>

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

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

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类