Question

这是我的网站。导航栏引起了我可怕的问题。昨晚我的朋友告诉我它正在下降，我只是不知道如何解决它：

http://i60.tinypic.com/23iigpi.png

所以我删除了宽度并减少了一些对我来说令人沮丧的按钮上的文字。

无论如何，现在我希望我的小导航栏位于我的白色块中间。有谁知道最好的方法？

http://www.simplypsychics.com/null/index-test.html

我试过了：

并修改CSS中的各种定位，但似乎没有任何效果。

这是导航的CSS：

#nav {
position: absolute;
top: 98px;
left:15px;
float: left;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 13px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}

这是我的HTML：

<div id="nav" style="margin:0 auto !important;">
<li class="home-icon1" onclick="window.location.href='http://www.simplypsychics.com/'"></li>
<li class="home-icon2"><a href="http://www.simplypsychics.com/readers/" target="_parent">FIND A PSYCHIC READER</a></li>
<li class="home-icon3"><a href="http://www.simplypsychics.com/readings/" target="_parent">PSYCHIC READINGS</a></li>
<li class="home-icon4"><a href="http://www.simplypsychics.com/book/" target="_parent">BOOK A READING</a></li>
<li class="home-icon5"><a href="http://www.simplypsychics.com/psychicreadings/" target="_parent">FIND OUT MORE</a></li>
<li class="home-icon6"><a href="http://www.simplypsychics.com/help/" target="_parent">HELP/FAQ</a></li>
</div>

此外，如果导航栏看起来很糟糕，就像我的朋友那样请告诉我！：（

Answer 1

如果导航条或多或少设定宽度（#nav看起来保持在840像素），那么您可以设置left:50%和margin-left:-420px（-420像素，因为它的一半导航栏的宽度，我们希望将其向左移动）。这应该有效，因为您已经将导航栏设置为绝对定位。

您必须从#nav div中移除此内容：style="margin:0 auto !important;"

内联样式和!important非常糟糕！

Answer 2

在父级（#headerwhiteback）上设置： text-align：center;

然后在#nav上删除：位置：绝对; float：left;

并添加此CSS：

#nav {
    display: inline-block;

}
#nav::before {
    content: "";
    clear: both;
}

另外，根据自己的喜好：添加margin-top：on #nav（25px似乎没问题）并制作padding-top：on next element，＃headertextbottom，小得多（20px似乎没问题）。

这只是标题的快速修复。请记住：CSS在这里看起来很恐怖，看起来会从头开始重写，或者只会让你越来越麻烦。祝你好运！

如何将我的导航栏对齐，使其永久位于我的白框中间（没有填充等）？

2 个答案: