<!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. nginx学习第三章

    一.系统环境 ubuntu6.4系统 nginx 版本: nginx/1.10.3 (Ubuntu). 二.打开目录浏览功能Nginx默认是不允许列出整个目录的.如需此功能,编辑虚拟主机配置文件,在l ...

  2. Linux课程学习 第三课

    生活中的许多事,并不是我们不能做到,而是我们不相信能够做到 https://www.linuxcool.com/ 一个很实用的Linux命令查询网站,并且还有发音 如果我们在系统终端中执行一个命令后想 ...

  3. linux 常用指令汇总

    新用户的一些操作: 查看当前用户:who am i(可以看到是否是伪终端)/也可以是whoami 添加用户:sudo adduser ..(用户名)..(此时创建的用户并未加入sudo组所以并不具有至 ...

  4. SpringCloud 第一篇:服务的注册和发现(Eureka)

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  5. springboot中使用servlet时返回结果乱码问题

    在总的配置文件:application.properties中做一个配置,把我的问题解决了. #编码格式 spring.http.encoding.force=true spring.http.enc ...

  6. Java模板引擎性能对比

    模板引擎性能对比 从Github上翻到对JSP.Thymeleaf 3.Velocity 1.7.Freemarker 2.3.23几款主流模板的性能对比,总体上看,Freemarker.Veloci ...

  7. 模拟赛小结:2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018)

    比赛链接:传送门 两个半小时的时候横扫了铜.银区的所有题,签到成功混进金区.奈何后面没能开出新的题. 最后一个小时的时候xk灵机一动想出了D题的做法,讨论了一波感觉可行,赶紧去敲.结束前2分钟终于过了 ...

  8. Elasticsearch改动

    随着Elasticsearch的版本升级,Elasticsearch的一些特性也在改变,下面是一些需要注意的地方 v6.x 版本之前 : 一个index下面是可以创建多个type v6.x 版本 : ...

  9. CentOS 7 安装 metasploit-framework

    1 一键安装metasploit-framework apt-get install curl,wgetcurl https://raw.githubusercontent.com/rapid7/me ...

  10. 前端面试题-display:none和visibility:hidden的区别

    一.display:none和visibility:hidden的区别 1.1 空间占据 1.2 回流和渲染 1.3 株连性 二.空间占据 display:none 隐藏后的元素不占据任何空间,而 v ...