<!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. Linux中断流程分析

    裸机中断: 1.中断流入口 2.事先注册中断处理程序 3.根据中断源编号,调取处理程序 irq_svc:1.等到产生中断源的编号(每一个中断号都有一个描述结构) 2.

  2. 垃圾回收gc --翻译

    原文在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management.基本保持了平译,并在一些地方做了概念解释.(转 ...

  3. 你在和脚本谈恋爱(自动化在IM聊天中的应用)

    谢谢打开这篇文章的每个你 测开之分层自动化(Python)招生简章 Python自动化测试报告美化 在python中进行数据驱动测试 太嚣张了!他竟用Python绕过了“验证码” 在网络世界里你不知道 ...

  4. 面试复习题（一）Java系列

    (根据自己的理解和根据黑马资料总结—意见不统一我会写上自己的理解) 一.Java面向对象 1.面向对象都有哪些特性以及你对这些特性的理解 继承.封装.多态.(抽象) 2.public,private, ...

  5. 504错误解决办法 让你的浏览器强制在后端服务器执行而不用通过前端CDN服务器

      因为后端执行时间过长,前端不等待,导致提示504错误的解决办法 504 错误是因为你的CDN服务器设置的延时有限, 超时导致的504 是前端不等待中止,是前端不行,后端应该正常 502 错误是后端 ...

  6. 【CERC 2014 E】2048

    题意 2048曾经是一款风靡全球的小游戏. 今天,我们换一种方式来玩这个小游戏. 你有一个双端队列,你只能把元素从左端或从右端放入双端队列中.一旦放入就不得取出.放入后,若队列中有连续两个相同的元素, ...

  7. 【2019.3.20】NOI模拟赛

    题目 这里必须标记一下那个傻逼问题,再不解决我人就没了! 先放一个 $T3$ $20$ 分暴力 #include<bits/stdc++.h> #define rep(i,x,y) for ...

  8. Django学习系列14:第一个数据库迁移

    在Django中,ORM的任务是模型化数据库. 创建数据库其实是由另一个系统负责的叫做迁移. 迁移的任务是根据你对models.py文件的改动情况,添加或删除表和列. 可以把迁移想象成数据库使用的版本 ...

  9. Java程序员必备的一些流程图

    Java程序员必备的一些流程图 转自https://juejin.im/post/5d214639e51d4550bf1ae8df 前言: 整理了一些Java基础流程图/架构图,做一下笔记,大家一起学 ...

  10. MongoDB——》聚合查询（project、match、limit、skip、unwind、group、sort）

    https://blog.csdn.net/weixin_43453386/article/details/85065043#1_testweightname_id_35 https://blog.c ...