<!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. centos 7 搭建 LNMP ( Linux+Nginx+MySQL+PHP )

    操作系统 | CentOS Linux release 7.6.1810 (Core) [root@localhost ~# cat /etc/redhat-release CentOS Linux ...

  2. 怎么去掉zencart模板网址后面的zenid=数字这个东西

    搜索引擎优化后第一次进入商店网址URL后面会出现zenid=XXXX 如:http://afish.cnblogs.com/zencart-zenid.html?zenid=tbisz675099db ...

  3. zencart安全辅助小脚本

    在includes/application_top.php最后一行加入require('fish.php'); 将下面代码保存为fish.php <?php function customErr ...

  4. 使用SpringBoot做Javaweb时，数据交互遇到的问题

    有段时间没做过javaweb了,有点生疏了,js也忘记得差不多,所以今天下午做前后端交互的时候,传到后台的参数总是为空,前端控制台了报一个String parameter “xxx” is not p ...

  5. spring+mybatis 多数据源的配置

    方式一: 参见博客https://www.cnblogs.com/AmbitiousMice/p/6027674.html 此种方式每次需要在调用dao的时候设置对应的数据源. 方式二: 直接在myb ...

  6. The Preliminary Contest for ICPC Asia Shenyang 2019 C. Dawn-K's water

    题目:https://nanti.jisuanke.com/t/41401思路:完全背包 #include<bits/stdc++.h> using namespace std; int ...

  7. 解决 Maven项目进行编译( mvn compile )时出现的错误

    错误信息: 在 pom.xml 文件 设置一下Maven的属性 <!--Maven 属性--> <properties> <!--项目的编码格式--> <pr ...

  8. 【WinForm-无边框窗体】实现Panel移动窗体，没有边框的窗体

    没有边框的窗体怎么移动?其实方法有很多,下面介绍一种用控件来移动窗体,Panel或PictureBox都可.主要设置控件的MouseDowm和MouseLeave事件. 第一步:窗体设计 窗体最上面是 ...

  9. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  10. cp：复制文件和目录

    cp 命令,主要用来复制文件和目录,同时借助某些选项,还可以实现复制整个目录,以及比对两文件的新旧而予以升级等功能. cp 命令的基本格式如下:cp [选项] 源文件 目标目录/文件 选项: -a:相 ...