用css写出横向导航栏
2016-03-14 20:43
501 查看
<p> 有以下几种方法:</p><p>1. ul + li</p>
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>横向导航栏</title> <style type="text/css"> *{margin:0;padding:0;} ul{ border:1px solid black; padding-left:20px; } ul li{ background-color:yellow; width:200px; text-align:center; list-style-type: none; display:inline-block; border:1px solid red; } </style> </head> <body> <ul> <li>第一个列表</li> <li>第二个列表</li> <li>第三个列表</li> </ul> </body> </html>
这里会出现li之间有间隙的问题,此时我们可以使用第二种方法
2. li + float
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>li间隙问题</title> <style type="text/css"> *{margin:0;padding:0;} ul{ border:1px solid black; padding-left:20px; } ul li{ background-color:yellow; width:200px; text-align:center; list-style-type: none; float:left; border:1px solid red; } </style> </head> <body> <ul> <li>第一个列表</li> <li>第二个列表</li> <li>第三个列表</li> </ul> </body> </html>
完美解决
3. 纯div + float
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>li间隙问题</title> <style type="text/css"> *{margin:0;padding:0;} #container{ border:1px solid black; padding-left:20px; } .div1{ float:left; } </style> </head> <body> <div id="container"> <div class="div1">第一个列表</div> <div class="div1">第二个列表</div> <div class="div1">第三个列表</div> </div> </body> </html>
4. 表格方式,这个就不写了。用了css之后就尽量不要用table惊醒排版了,费时费力费代码,效果还不一定好~
相关文章推荐
- 一些css、css3画的效果等,持续更新
- css样式大全
- CSS盒模型 及 定位position
- css属性选择器应用
- css 画圆,环形,椭圆
- css画三角形
- css 画矩形
- css样式
- CSS模块化基本思想
- 自定义RatingBar显示的样式
- css3 box-sizing属性
- CSS2【3】-- Positioning
- 一步步教大家编写酷炫的导航栏js+css实现
- [DIV/CSS] 用CSS和JS打造一个简单的图片编辑器
- 谈谈css王朝的px,em,rem之间的那些事儿
- iOS - 同一个Label的不同样式显示
- [DIV/CSS] 【译】下一代选择器:CSS4
- 自定义 <input type="file" /> 样式
- CSS3:布局
- 2016.3.14__CSS 浮动__第五天