<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>CSS + ul li 横向排列的两种方法 </title>

</head>

<body>

  <div id="nav">

  <ul>

    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>

    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>    

    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>

    <li><a href="http://blog.csdn.net/superbirds" title="">superbirds</a></li>

  </ul>

  </div>

</body>

</html>

CSS代码一：

* {

    margin: 0;

    border: 0;

    padding: 0;

    font-size: 13pt;

}

#nav {

    height: 40px;

    border-top: #060 2px solid;

    border-bottom: #060 2px solid;

    background-color: #690;

}

#nav ul {

    list-style: none;

    margin-left: 50px;

}

#nav li {

    display: inline;

    line-height: 40px;

    float:left

}

#nav a {

    color: #fff;

    text-decoration: none;

    padding: 20px 20px;

}

#nav a:hover {

    background-color: #060;

}

CSS代码二：

* {

    margin: 0;

    border: 0;

    padding: 0;

    font-size: 13pt;

}

#nav {

    height: 40px;

    border-top: #060 2px solid;

    margin-top: 100px;

    border-bottom: #060 2px solid;

    background-color: #690;

}

#nav ul {

    list-style: none;

    line-height: 40px;

    margin-left: 50px;

}

#nav li {

    display: block;

    float: left;

}

#nav a {

    display: block;

    color: #fff;

    text-decoration: none;

    padding: 0 20px;

}

#nav a:hover {

    background-color: #060;

}

　　

　　

CSS + ul li 横向排列的两种方法的更多相关文章

  1. css ul li 横向排列

    因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建 ...

  2. ul li横向排列及圆点处理

    如何用CSS制作横向菜单 让ul li横向排列及圆点处理   第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是:<ul> <li><a href ...

  3. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  4. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  5. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  6. 菜单制作:ul li横向排列

    CSS菜单制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. CSS导入使用及引用的两种方法

    方法一<link rel="stylesheet" type="text/css" href="test.css"> 方法二&l ...

  8. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  9. css划隔横线的两种方法

    css划隔横线的两种方法  方法一:用DIV,代码如下:(推荐此方法)    <div style="width:800px;height:1px;margin:0px auto;pa ...

随机推荐

  1. Java内存泄漏真实案例

    内存泄漏:当不再需要一个对象时,垃圾收集器会回收它:如果不需要的对象一直在产生而不被收回,就称作“内存泄漏”. 以下为本人在工作中遇到的内存泄漏的案例: 1.对于大量的请求,使用了Executors. ...

  2. Linux配置iSCSI存储

    1.基础知识 1.1 存储相关     直接存储(DAS):例如本机上的磁盘,就是属于直接存储设备.     存储区域网络(SAN):来自网络内的其他存储设备提供的磁盘.Iscsi就是属于该方式.   ...

  3. WinRAR去广告

    许多解压软件的广告看着令人头疼,今天我就给大家分享一个把WinRAR软件的广告去掉的方法. 环境:     win rar     restorator 2007(腾讯软件直接下载即可) 步骤: 首先 ...

  4. 【SDOI 2014】数表

    题意 https://loj.ac/problem/2193 题解 ​显然就是求 $\sum\limits_{i=1}^{n} \sum\limits_{j=1}^{m} \sigma_1(\gcd{ ...

  5. CUDA升级后

    打开工程文件.vcxproj,找到 <Import Project="$(VCTargetsPath)\BuildCustomizations\CUDA 10.0.props" ...

  6. Spring相关概念

    DIP: Dependency Inversion Principle.翻译过来是依赖反转原则,也叫依赖倒置原则. 依赖倒置原则是设计模式几个重要原则之一.具体定义就是,底层模块依赖高层模块定义的接口 ...

  7. linux NFS配置案例

    1.查看NFS软件包        [root@server7 ~]# rpm -qa | egrep "nfs|rpcbind" 2.安装NFS和RPC服务        [ro ...

  8. Nginx动静分离经典案例配置

    随着Nginx高性能Web服务器大量被使用,目前Nginx最新稳定版为1.2.6,张宴兄在实际应用中大量使用Nginx,并分享Nginx高性能Web服务器知识,使得Nginx在国内也是飞速的发展.那今 ...

  9. puppet使用rsync模块同步目录和文件

    puppet使用rsync模块同步目录和文件 2013-09-23 14:28:57 分类: LINUX 环境说明: OS :    CentOS5.4                         ...

  10. php的$_get,$_post用法

    $_GET 可以被收藏, 可以被缓存, 可以保存在历史记录中, 可以提交请求但是很不安全, 长度有限制在2000个字符,其实get请求就是一个url;$_GET['user_name'] $_POST ...