可以有俩种方法,暂时只用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. POJ 1753 Flip Game 状态压缩,暴力 难度:1

    Flip Game Time Limit: 1000MS  Memory Limit: 65536K  Total Submissions: 4863  Accepted: 1983 Descript ...

  2. UVa 11361 - Investigating Div-Sum Property

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  3. 二模 (2) day1

    第一题: 题目描述:淘汰赛制是一种极其残酷的比赛制度.2n名选手分别标号1,2,3,…,2n-1,2n,他们将要参加n轮的激烈角逐.每一轮中,将所有参加该轮的选手按标号从小到大排序后,第1位与第2位比 ...

  4. 判断数据库内容,在页面显示自定义数据case when

    判断数据库内容,在页面显示自定义数据 case when...then ...else...end 比如:数据库内容是这样: 通过sql语句判断,数据库的name字段,内容是月桂的,显示嫦娥,其他的显 ...

  5. jquery 取的单选按钮组的值

    <input type=”radio” name=”wholesale_one” id=”wholesale_one” value=”1″ />1箱起批<input type=”ra ...

  6. Java:String、StringBuffer和StringBuilder的区别

    1 String String:字符串常量,字符串长度不可变.Java中String是immutable(不可变)的. String类的包含如下定义: /** The value is used fo ...

  7. java内部类和外部类

    1.使用static可以声明一个内部类, 可以直接在外部调用 class Outer{ // 定义外部类 private static String info = "hello world& ...

  8. 推荐一款免安装的在线Visio流程工具ProcessOn

    昨天收到一人的邮件,说某个软件叫ProcessOn是web版的visio,出于对技术知识的渴望以及自己的好奇所以对ProcessOn进行了一番体验.结果有点被这个软件给吸引上了,无论是在用户体验上,还 ...

  9. RPI学习--环境搭建_串口连接

    有两种, 一种是通过MAX2323芯片连接的串口,要接VCC为芯片供电. 另一种是通过PL2302芯片连接的USB,可不接VCC,用电脑USB口为芯片供电. 下面以通过MAX2323方式为例. 1,V ...

  10. Project和Module的介绍

    Project 和 Module 介绍 这两个概念是 IntelliJ IDEA 的必懂知识点之一,请务必要学会. 如果你是 Eclipse 用户,并且已经看了上面给的链接,那 IntelliJ ID ...