可以有俩种方法,暂时只用float:left;   找到每一个li进行水平浮动

#hd_nav li{
border-right: 1px solid rgba(255,255,255,0.2);
float: left;
height: 14px;
padding: 0 10px;
}

border-right 向又 1px  添加一条实线 并添加颜色。

值得一说的是 rgba(0,0,0,0)  其实就是rgb +ALPHA 进行设置颜色 和透明度 。最后一个参数1的时候为实线 0是完全透明。 参数可以再0-1之间进行设置。

rgba 在ie8 及以下的浏览器不支持透明效果,显示依然为实线 ,为了解决兼容性的问题,我们可以这样做;

DIV{
color: rgb(127, 127, 127);
color: rgba(0, 0, 0, 0.5);
}

当浏览器不支持的时候显示的是rgb 当支持的时候用的是rgba()

css ul li 水平布局问题的更多相关文章

  1. CSS + ul li 横向排列的两种方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  3. CSS ul li a 背景图片与文字对齐

    <div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...

  4. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  5. DIV+CSS布局重新学习之css控制ul li实现2级菜单

    竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

  7. div+css(ul li)实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  8. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  9. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

随机推荐

  1. 如何在android项目中引用project作为类库引用

    前言: 在我们开发项目的时候,存在很多多个项目共有一个资源.逻辑代码的情况,这种情况一般我们采用在开发项目中导入别的项目作为引用的类库.资源等. 操作: 1.  新建一个android项目common ...

  2. Elasticsearch Java Api--DeleteByQuery

    一.安装插件 要删除某个索引的一个type下的所有文档,相当于关系型数据库中的清空表操作.查阅了一些资料可以通过Delete-by-Query插件删除,首先使用插件管理器安装Delete-by-Que ...

  3. 创建一个ROS msg

    1. msg •msg:msg文件是简单的文本文件,用于描述ROS中消息(消息的各个参数项).用于为不同的编程语言生成有关消息的源代码. •srv:描述服务的文件,由两部分组成:请求和反馈: msg文 ...

  4. 自动登录 登陆成功那个alert遮盖一直存在bug

    手动登陆的时候,登陆成功MBProgressHUD message:@"登陆成功" 然后再dispatch_after 里调用MBProgressHUD hideHUD隐藏可以成功 ...

  5. exit(0)与exit(1)、return区别

    exit(0):正常运行程序并退出程序: exit(1):非正常运行导致退出程序: return():返回函数,若在主函数中,则会退出函数并返回一值. 详细说: 1. return返回函数值,是关键字 ...

  6. idea快捷键(转)

    Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*...*/ )Ctrl+D 复制行Ctrl+X 删除行快速修复 alt+enter (modify/cast)代码提示 alt+/ctr ...

  7. goldengate复制过程字符集处理一例

    源端是oracle, al32utf8,表里有乱码,目标端是sybase cp936,两端的DB都不能改字符集,而且源端是目标端的超集,当复制有乱码的数据(非中文或英文数字等),目标端replicat ...

  8. pager分页框架体会

    <pg:pager> 元素的属性中: maxPageItems说的是每页偏移量是多少,这个并不是说每一页显示多少,而是第二页比第一页来说,在第一页的尾部增加多少,第一页又被覆盖多少,是决定 ...

  9. 《JAVA学习笔记(14-10---14-11抽象类)》

    [14-10]面向对象-抽象类的产生 /* 描述狗,行为,吼叫. 描述狼,行为,吼叫. 发现他们之间有共性,可以进行向上抽取. 当然是抽取他们的所属共性类型,犬科. 犬科这类事物,都具备吼叫行为,但是 ...

  10. js库之art.dialog

    自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切 ...