可以有俩种方法,暂时只用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 webview 漏洞背后的节操

    by superhei 2013/09/06 [注:本文提到的都是我个人的观点,该行为也是私人行为,与任何组织.公司无关.另:水军请自重!] 一.前言   这两天,一个2+年前的android web ...

  2. HDU 3533 Escape bfs 难度:1

    http://acm.hdu.edu.cn/showproblem.php?pid=3533 一道普通的bfs,但是由于代码实现出了bug还是拖了很久甚至对拍了 需要注意的是: 1.人不能经过炮台 2 ...

  3. Mac OS X 卸载MySQL

    sudo rm /usr/local/mysqlsudo rm -rf /usr/local/mysql*sudo rm -rf /Library/StartupItems/MySQLCOMsudo ...

  4. 将table导出为Excel的标准无乱码写法

    导出为Excel有很多种写法,对于一些复杂的格式,笔者喜欢在后台先拼成一个<table>,再使用Response输出. 如果数据中包含中文或者一些特殊字符,可很多不规范的写法都会导致页面乱 ...

  5. [转]理解WSRF之一 使用WS-ResourceProperties (整理自IBM网站)

    理解 WSRF第1部分-使用 WS-ResourceProperties   本 教程是一个由 4 部分组成的系列文章中的第 1 部分,该系列介绍 WSRF(Web Services Resource ...

  6. eclipse web项目实际工程路径对应

    src/1.properties ---->实际路径 /WEB-INF/classes/1.propertiessrc/com.ayong.one/2.properties /WEB-INF/c ...

  7. Line计划今年全面进军中国市场:建立本地团队

    北京时间6月13日下午消息,<华尔街日报>报道称,移动消息应用Line计划于今年晚些时候进军中国市场.Line将在中国建立本地团队,开发内容和功能,从而进一步开拓中国这一全球最大的移动市场 ...

  8. XCode之entitlement

    entitlement是codesign的一个输入,参见:codesign. entitlement的意思是权力,也就是表明应用所具有的权利,可以访问什么,不能访问什么等.这些信息会在codesign ...

  9. Python闭包实现的计数器

    #!/usr/bin/env python #coding=utf-8 def generate_counter(): CNT = [0] def add_one(): CNT[0] = CNT[0] ...

  10. SQL优化-索引

    (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提供了两种索引:聚集索引(clustered index,也称聚类索引.簇集索引)和非聚集索引(nonc ...