无法在页面中央显示我的导航菜单

问题描述

导航菜单未居中.我尝试了很多方法让它居中，但都没有奏效.

HTML

<li><a href="index.html">首页</a><li><a href="servicii.html">Servicii</a><li><a href="portofoliu.html">Portofoliu</a><li><a href="contact.html">联系方式</a>

CSS

#nav-bar li a {颜色:#000；文字装饰:无；列表样式类型:无；字体大小:14px；字体系列:Myriad Pro"、Myriad Pro Cond"、Myriad Pro Light"、Arial、sans-serif；字体粗细:粗体；#导航栏{文本转换:大写；列表样式:无；填充:23px 0 23px 0；背景图片:url(../images/nav-bar.jpg);#nav-bar li {向左飘浮;右边距:58px；左边距:58px；边距顶部:-8px；}

解决方案

http://jsfiddle.net/NLfaz/4/

#nav-bar {文本对齐:居中；}#nav-bar li {向左飘浮;/* 删除这一行 */显示:内联块；}

另外，你没有用 } 关闭你的一些 css，所以我在

中添加了它们

The navigation menu is not centered. I have tried many methods of getting it to be centered, but none worked.

HTML

<div id="nav-bar">
<li> <a href="index.html">Home</a> </li>
<li> <a href="servicii.html">Servicii</a> </li>
<li> <a href="portofoliu.html">Portofoliu</a> </li>
<li> <a href="contact.html">Contact</a> </li>

CSS

#nav-bar li a {
color: #000;
text-decoration: none;
list-style-type: none;
font-size: 14px;
font-family: "Myriad Pro", "Myriad Pro Cond", "Myriad Pro Light", Arial, sans-serif;
font-weight: bold;

#nav-bar {
text-transform: uppercase;
list-style: none;
padding: 23px 0 23px 0;
background-image: url(../images/nav-bar.jpg);

#nav-bar li {
float: left;
margin-right: 58px;
margin-left: 58px;
margin-top: -8px;
}

解决方案

http://jsfiddle.net/NLfaz/4/

#nav-bar {
   text-align: center;
}

#nav-bar li {
   float: left;  /* removed this line */
   display: inline-block;
}

Also, you weren't closing some of your css with } , so I added those in

这篇关于无法在页面中央显示我的导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！