在解决ul居中问题时想到的几点

最近在做网站的时候碰到了一个问题：我用 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)

相关推荐

  • 在解决ul居中问题时想到的几点

    最近在做网站的时候碰到了一个问题:我用 ul 标签和 li 标签构建的导航栏想要在不确定 li 数量和 li, ul 宽度的情况下居中,但是给 ul 使用了 text-align:center 之后却没有起到应有的效果. 原来的页面结构是: 复制代码 代码如下: <div id="menu">    <ul class="menu_ul">      <li class="menu_li"><a href

  • 解决Java 部署Tomcat时使用jni和jna调用DLL文件的问题

    我的前一篇博客提到,我们公司项目的restful框架中要用到底层的DLL C++库,最后经过测试验证结果选择采用JNA方法来调DLL库. 之后基础框架在IDEA中的jetty服务中调试成功,但是在部署到Tomcat上时出现了无法加载DLL库的状况,只能现学现卖了. 一. 把DLL文件放在Tomcat下的方法: 在Tomcat中加载dll,供其它接口调用: 在Tomcat目录根下新建一个文件夹,这里就叫DLL吧,<tomcat_home>/DLL: 把需要用到的dll放入新建的DLL目录下: 编

  • 解决Python 遍历字典时删除元素报异常的问题

    错误的代码① d = {'a':1, 'b':0, 'c':1, 'd':0} for key, val in d.items(): del(d[k]) 错误的代码② -- 对于Python3 d = {'a':1, 'b':0, 'c':1, 'd':0} for key, val in d.keys(): del(d[k]) 正确的代码 d = {'a':1, 'b':0, 'c':1, 'd':0} keys = list(d.keys()) for key, val in keys: d

  • 解决iOS UITextField 编辑时文本偏移问题

    解决iOS UITextField 编辑时文本偏移问题

    1.在cell中添加UITextField,在编辑的时候总是出现文本偏移问题,编辑结束时回复正常,解决方式如下: (1)代码创建UITextField,并添加上去,设置textField的一些属性: - (UITextField *)textField{ if (_textField == nil) { _textField = [UITextField new]; _textField.borderStyle = UITextBorderStyleNone; _textField.conten

  • 如何解决ASP.NET新增时多字段取值的问题

    ASP.NET 开发人员在卡发时经常会碰到一个情况,就是新增的页面中字段太多,在点击保存的时候需要一个一个的赋值实体或者构建SQL语句去保存.这样不仅浪费体力还需要占用大量的文本行控件去写代码.经过构思是否可以使用一种更方便的办法去解决呢?提高代码的内聚性. 1.思路 我们知道一般新增页面最多的就是一大堆文本框让用户输入内容,然后点击保存按钮进行提交将数据持久化到数据库. 在点击提交的时候传统方式就是一个一个文本框的读取赋值. HTML代码如下: <asp:TextBox ID="Text

  • Android解决dialog弹出时无法捕捉Activity的back事件的方法

    本文实例讲述了Android解决dialog弹出时无法捕捉Activity的back事件的方法.分享给大家供大家参考.具体分析如下: 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到back事件: 1)重写onKeyDown或者onKeyUp方法 2)重写onBackPressed方法 3)重写dispatchKeyEvent方法 这三种办法有什么区别在这里不进行阐述,有兴趣的朋友可以查阅相关资料. 然而在有dialog弹出时,

  • 解决jQuery使用JSONP时产生的错误

    解决jQuery使用JSONP时产生的错误

    什么是域,简单来说就是协议+域名或地址+端口,3者只要有任何一个不同就表示不在同一个域.跨域,就是在一个域中访问另一个域的数据. 如果只是加载另一个域的内容,而不需要访问其中的数据的话,跨域是很简单的,比如使用iframe.但如果需要从另一个域加载并使用这些数据的话,就会比较麻烦.为了安全性,浏览器对这种情况有着严格的限制,需要在客户端和服务端同时做一些设置才能实现跨域请求. JSONP简介 JSONP(JSON with Padding)是一种常用的跨域手段,但只支持JS脚本和JSON格式的数

  • Android 解决dialog弹出时无法捕捉Activity的back事件问题

    Android 如何解决dialog弹出时无法捕捉Activity的back事件 在一些情况下,我们需要捕捉back键事件,然后在捕捉到的事件里写入我们需要进行的处理,通常可以采用下面三种办法捕捉到back事件: 1)重写onKeyDown或者onKeyUp方法 2)重写onBackPressed方法 3)重写dispatchKeyEvent方法 这三种办法有什么区别在这里不进行阐述,有兴趣的朋友可以查阅相关资料. 然而在有dialog弹出时,想捕捉back键的事件的话,上述三种办法都无法实现.

  • Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题

    Android 中解决Viewpage调用notifyDataSetChanged()时界面无刷新的问题 问题描述 相信很多做过Viewpager的人肯定遇到过这个问题,这个是bug还是Android就是如此设计的,我们不做讨论.总之,它确实影响我们功能的实现了. 可能不少同学选择为Viewpager重新设置一遍适配器adapter,达到刷新的目的.但是这种方法在大多数情况下,是有问题的. 解决办法 以我们可以尝试着修改适配器的写法,覆盖getItemPosition()方法,当调用notify

  • 通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

    懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import

随机推荐