怎么用div横排做导航栏（新手想写个导航栏，但是文字不知道如何横排，在div里面居中）
本文目录
新手想写个导航栏，但是文字不知道如何横排，在div里面居中
你用的是p标签，p标签默认是占满一行，所以你的导航就不能水平排列了；如果一定要用p标签的话可以给p标签设置个宽度再加个浮动，eg：width：120px；float：left；导航类建议用ul li。
如何用DIV+CSS做漂亮的横排导航栏
先码好导航栏所需要的基本的HTML代码
这个就不必多说具体的代码如下：
《html》
《head》
《title》横向导航栏《/title》
《style》
《!----》
《/style》
《/head》
《body》
《div class="nav"》
《ul》
《li》《a href="#"》首页《/a》《/li》
《li》《a href="#"》导航1《/a》《/li》
《li》《a href="#"》导航2《/a》《/li》
《li》《a href="#"》导航3《/a》《/li》
《li》《a href="#"》导航4《/a》《/li》
《li》《a href="#"》导航5《/a》《/li》
《li》《a href="#"》导航6《/a》《/li》
《/ul》
《/div》
《/body》
《/html》
下面我们通过CSS 来改变他的样式。
首先我们先让导航在浏览器的中间。不过在让他居中前得先设置一个宽度，没有宽度就没法居中，这个的原因我就不用赘述了吧！
现在常用的网站宽度为960或980（当然也有其他的，一些网站会根据访客的显示器大小有不同宽度的样式，原因我就不在这多废话了）我们在这就用980吧。
方法是在《style》《/style》之间加入如下代码来改变他的宽度。为了让结果明显，我们给它又加了一个边框。
《style》
《!--
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
}
--》
《/style》
接下来我们让他居中。我们在样式中加入以下代码。
.nav ul{
width:980px;/*设置元素宽度为980px*/
border:1px solid #000;/*设置一个颜色为#000，宽度为1px的边框*/
margin:0px auto 0px auto;/*也可以简写为margin:0 auto*/
}
因为我们要做的是横向的导航栏，所以现在我们要把它变成横向排列。我们在样式中加入以下代码。
.nav ul li{
float:left;/*让li元素左浮动*/
}
我们看到测试结果如图4。
边框之所以挤到一起了是因为浮动以后 li就变成了联级元素，就没有宽和高了，所以也就没法把边框撑起来了啊。（具体的原因想知道可以百度）当然稍后我们可以给ul或.nav加上高度。
接下来，我们通过给元素《a》添加样式，让他更美观。加入以下代码。
.nav ul li a{
width:80px;/*设置元素宽为80px*/
height:28px;/*设置高度为28px*/
line-height:28px;/*设置行距为28px，让文字在每行的中间位置*/
background:red;/*设置元素的背景为红色*/
color:#FFF;/*文字颜色是白色*/
margin:5px 10px;
font-size:12px;/*用12号字*/
display:block;/*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
text-align:center;/*让文本居中*/
text-decoration:none; /*去掉下划线*/
}
我们再加入点互动，当访客鼠标放到某个元素上的时候，这个元素要有别于其他元素。要实现这个我们就要用到:hover这个伪类。在样式中加入以下代码。
.nav ul li a:hover{ /*这个大概的意思就是当鼠标放到这个a元素的上面时，这个a元素的样式就按下面的代码执行*/
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
最后稍微整理一下代码
.nav ul{
width:980px;
margin:0px auto;
height:38px;
padding:0;
}
.nav ul li{
float:left;
}
.nav ul li a{
width:80px;
height:28px;
line-height:28px;
background:red;
color:#FFF;
margin:5px 10px;
font-size:12px;
display:block;
text-align:center;
text-decoration:none;
}
.nav ul li a:hover{
width:78px;
height:26px;
line-height:28px;
border:1px solid red;
color:red;
background:#FFF;
}
看看效果，成功没？
思路就是这样的，其中还可以再加一些自己的元素，比如背景图片之类，效果就更好了。
CSS+div怎么做图片中的导航条
css+div做图片中的导航条的方法：
思路：对ul里的li设置排成一排所以需要设置一个CSS display:inline让li排成一排，从而让li并排布局。然后需要对ul li里的a标签设置display:block的，但a父级li不设置具体宽度，所以需要对a设置display:inline-block让其a随li并排继承同时对a设置宽度高度等样式生效。
1、CSS代码：
ul#nav{ width:100%; height:60px; background:#00A2CA;margin:0 auto}
ul#nav li{display:inline; height:60px}
ul#nav li a{display:inline-block; padding:0 20px; height:60px; line-height:60px;
color:#FFF; font-family:"\5FAE\8F6F\96C5\9ED1"; font-size:16px}
ul#nav li a:hover{background:#0095BB}/*设置鼠标滑过或悬停时变化的背景颜色*/
2、HTML代码
《ul id="nav"》
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《/ul》
3、效果截图
更多文章：
2025年8月14日 09:45
2025年10月30日 08:30
sql语句优化面试（面试问到 数据库性能优化 怎么回答 我是Oracle数据库）
2025年7月30日 02:15
2026年4月10日 03:30
图片转换代码软件（求一款图片转网页代码的工具，就是可以把图片转换成网页广告的那种，）
2025年6月30日 23:30
desense（手机desense测试，中文是什么意思怎么测试）
2025年11月12日 03:00
如何使用ubuntu系统（win10安装ubuntu双系统怎么装）
2025年9月4日 20:00
sql数据库多少钱（access sql 等的数据库，开发工具多少钱运行平台多少钱）
2026年1月21日 20:15
php环境搭建的原理（什么是PHPWEB环境的搭建及其作用）
2026年8月23日 16:15
c语言一维数组有几个数（c语言的一维数组中至少要有几个元素）
2025年11月27日 13:30
1111101100101110转为16进制？将23456表为16进制数
2025年12月19日 18:30
2025年6月30日 14:15
2026年8月29日 05:00
指针变量为什么占4个地址（C语言中，为什么指针变量无论指向那个类型的变量，其所占的字节都为4个字节详解）
2025年7月27日 19:00
html5模板 支付成功（html5怎么实现支付宝实时转账）
2025年7月5日 15:45
2026年7月12日 02:45
js jquery面试（jquery中怎么调用js方法调用）
2025年8月8日 03:45
2026年5月11日 16:00
