DDR爱好者之家 Design By 杰米
最近在做网站的时候碰到了一个问题：我用 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标准化的设计更有助于我们提高维护网站的效率。
原来的页面结构是：
复制代码 代码如下:
<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标准化的设计更有助于我们提高维护网站的效率。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]