可以有俩种方法,暂时只用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. [js]变量声明、函数声明、函数定义式、形参之间的执行顺序

    一.当函数声明和函数定义式(变量赋值)同名时 function ledi(){ alert('ledi1'); }; ledi(); var ledi = function (){ alert('le ...

  2. ZOJ 3654 Letty's Math Class 模拟 难度:0

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=4844 题意:给你一个只包含中括号和正整数,+,-,结果在longlong范围内 ...

  3. elasticsearch nested查询

    项目里可能会遇到多级嵌套的情况,实际上最多两级,三级及以上,我测试不通过. 一级索引时,我插入数据,会自动创建索引映射:然二级时,索引映射必须手动创建. 映射: PUT test999 { " ...

  4. sql遍历树

    oracle有直接的sql来遍历一颗树的子节点和父节点 遍历一个节点的所有子节点(classid的值就是该节点的值) select *  from organization_ a start with ...

  5. java面试题之ssh

    1.写出你熟悉的开源框架以及各自的作用(项目中为什么使用SSH) 答:框架:hibernate,spring,struts1/struts2. Hibernate主要用于数据持久化:封装了JDBC操作 ...

  6. JavaScript中Date的一些细节

    对于开发人员来说,Date有时候或许会很重要,我们可以通过new Date()来创建一个日期对象.例如: var start = new Date(), //获取当前时间 today = new Da ...

  7. JVM-运行时数据区

                                                                              运行时数据区示意图                 ...

  8. 小米Recovery线刷精灵 v1.0.0 破解版

    下载地址:http://www.crsky.com/soft/75923.html 小米Recovery线刷精灵支持将Recovery线刷包一键刷入小米手机,支持小米所有型号. 小米Recovery线 ...

  9. mahout中kmeans算法和Canopy算法实现原理

    本文讲一下mahout中kmeans算法和Canopy算法实现原理. 一. Kmeans是一个很经典的聚类算法,我想大家都非常熟悉.虽然算法较为简单,在实际应用中却可以有不错的效果:其算法原理也决定了 ...

  10. maven3在eclipse3.4.2中创建java web项目

    学习maven时参考的一些的博客地址:http://www.cnblogs.com/fnng/archive/2011/12/16/2290587.htmlhttp://sarin.iteye.com ...