<!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. 读《JavaScript面向对象编程指南》（一）

    第二章 基础 通常认为在JavaScript中主要包括五种基本数据类型:数字.字符串.布尔值.undefined.null.任何不属于上述五种基本类型的值都被认为是一个对象. null和undefin ...

  2. [uboot] （番外篇）global_data介绍（转）

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ooonebook/article/det ...

  3. nginx启动、停止、重启

    转自https://www.cnblogs.com/wangcp-2014/p/9922845.html 启动 启动代码格式:nginx安装目录地址 -c nginx配置文件地址 例如: [root@ ...

  4. nginx第三天

    nginx架构分析 nginx模块化 nginx基于模块设计,每个模块是一个功能实现,分布式开发,团队协作 核心模块,标准http模块,可选http模块,邮件模块,第三方模块 编译后的源码目录  ob ...

  5. 如何配置IIS使其支持APK/WGT文件的下载

    1.打开Internet 信息服务(IIS)管理器: 2.选择需要配置的网站: 3.右侧功能界面双击进入“MIME类型”: 4.点击右侧“添加”按钮,在弹出窗口里文件扩展名输入:apk,MIME类型输 ...

  6. 命令行执行while语句

    while true;do echo hello world;sleep 1;done

  7. C# webapi

    HttpContextBase context = (HttpContextBase)Request.Properties["MS_HttpContext"];//获取传统cont ...

  8. QT:如何重新生成makefile文件

  9. 51 Nod 1089 最长回文子串（Manacher算法)

    1089 最长回文子串 V2(Manacher算法)  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 回文串是指aba.abba.cccbccc.aaa ...

  10. Linux任务计划及周期性任务执行：at、crontab命令

    一.概述 未来的某时间点执行一次某任务:at, batch 周期性运行某任务:crontab 这两个任务的执行结果:会通过邮件发送给用户 (本地终端用户之间的邮件通知) centos 5,6,7默认开 ...