可以有俩种方法,暂时只用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. P142-1

    P142-1.1 登录页面 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  2. Android 解压html压缩数据

    public static String unzipHTML(String s){ int endPos = s.indexOf("\r\n\r\n"); if(endPos< ...

  3. LA 3516 - Exploring Pyramids

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  4. HMM TOOL

    HMM隐马尔科夫模型 MATLAB 工具包对各种数据的处理 HMM 工具包下载地址: http://www.cs.ubc.ca/~murphyk/Software/HMM/hmm.html 工具包使用 ...

  5. HDU 5451 广义斐波那契数列

    这道题目可以先转化: 令f(1) = 5+2√6 f(2) = f(1)*(5+2√6) ... f(n) = f(n-1)*(5+2√6) f(n) = f(n-1)*(10-(5-2√6)) = ...

  6. FCKEditor文件上传提示信息的汉化

    FCKEditor文件上传提示信息的汉化在FCKeditor中,虽然可以自动监测客户端语言,但是仍有小部分信息未能得到汉化.例如上传图片.Flash时,上传成功和上传失败的对话框提示信息均为英文,只要 ...

  7. C++中的容器类详解

    一.STL容器类 STL(Standard Template Library)的六大组件:容器(containers).迭代器(iterators).空间配置器(allocator).配接器(adap ...

  8. [安卓][转]internal(com.android.internal)和hidden(@hide)APIs简介及在应用程序中的调用方法

    转自:http://www.cnblogs.com/xirihanlin/archive/2011/06/05/2073118.html [引言]:我在做android softap的时候看到andr ...

  9. SharePoint安全 - 在Goolge和Bing中查找SharePoint相关内容

    博客地址 http://blog.csdn.net/foxdave 本篇提供两个查询串字典,分别对应Google和Bing的搜索,用来查询SharePoint网站的相关内容 Google ShareP ...

  10. Access 中数据库操作时提示from子句语法错误

    问题:如果在Access 中数据库操作时提示from子句语法错误原因:语句中某一单词为Access中的关键字.如:select * from user.其中user就是一关键字.解决:用中括号[]将其 ...