css ul li 水平布局问题
可以有俩种方法,暂时只用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 水平布局问题的更多相关文章
- CSS + ul li 横向排列的两种方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- CSS ul li a 背景图片与文字对齐
<div class="four"> <h2>电子商务</h2> <img src="images/photo2.gif&quo ...
- css ul li 横向排列
因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...
- DIV+CSS布局重新学习之css控制ul li实现2级菜单
竖状菜单: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- div+css(ul li)实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- li 水平排列并自动填满 ul
找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...
- css案例学习之table tr th td ul li实现日历
效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...
随机推荐
- C# Async/Await异步函数原理
原理 与同步函数相比,CLR在执行异步函数时有几个不同的特点: 1. 并非一次完成,而且分多次完成 2. 并非由同一个线程完成,而是线程池每次动态分配一个线程来处理: 结合 ...
- DotNetBar v12.7.0.10 Fully Cracked
更新信息: http://www.devcomponents.com/customeronly/releasenotes.asp?p=dnbwf&v=12.7.0.10 如果遇到破解问题可以与 ...
- (转)HTML5 本地存储
原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...
- 2016 - 1- 22 HTTP(三)
一: iOS中发送HTTP请求的方案 三: HTTP通信过程 1.请求 1.1 HTTP协议规定,一个完整的有客户端发给服务器的请求应包含以下内容: 1.1.1 请求头: 包含了对客户端环境的描述与 ...
- 谈谈 Mifare Classic 破解
2008 年的时候,荷兰恩智浦(NXP)公司开发的 RFID 产品 Mifare Classic 就被破解了,黑历史在这里就不在具体说了,想详细了解可以自己 Google 百度.现在还是重点说说关于 ...
- JAVA的数组和输入
package com.java1995; import java.util.Scanner; public class Array { public static void main(String[ ...
- BZOJ 1042 硬币购物
先不考虑限制,那么有dp[i]表示i元钱的方案数. 然后考虑限制,发现可以容斥. 其实整个题就是两个容斥原理.感觉出的蛮好的. #include<iostream> #include< ...
- Tiling Up Blocks_DP
Description Michael The Kid receives an interesting game set from his grandparent as his birthday gi ...
- C#处理Json文件
JSON(全称为JavaScript Object Notation) 是一种轻量级的数据交换格式.它是基于JavaScript语法标准的一个子集. JSON采用完全独立于语言的文本格式,可以很容易在 ...
- ZOJ2006 (后缀自动机)
求一个字符串的最小表示法. 将字符串S倍长,从根走length(s)步所走路径即为最小表示法. 记所到达位置为x,则这个最小表示法的起点为a[x]-len(s)+1 ; var T:longint; ...