Question

我的网站图库页面存在一些定位问题。不幸的是，我还没有上传网站，因为我希望首先纠正这些问题。当我想让它自动居中时，我网站的导航部分会自动定位到网站的右侧。在我的样式表的任何部分都没有正确的位置，这让我觉得它可能是我的画廊样式表和我的主样式表的冲突。

style.css：

#wrapper {

}

#landscape {
    height: 599px;
    margin: auto;
}

#nav {
    background: #404040;
    float: left;
    height: 129px;
    width: 1026px;
    margin-left: 375px;

}

#headline {
    margin-top: 15px;
    margin-left: 129px;
}

#navlist {
     margin: 0;
     padding: 0;
     list-style-type: none;
     margin-left: 129px;
     border: none;
}

#navlist li {
    display: inline;
    padding-right: 10px;

}

#logo {
    float: right;
    width: 294px;
    height: 111px;
    background: url(images/logo_grey.jpg);
    margin-right: 120px;
    margin-top: -98px;
}

画廊风格：

#wrapper {
    margin:auto;
    width: 990px;
    height: 599px;
}

#main {
    margin-bottom: -20px;
}

#gallery {
    height: 483px;
    width: 990px;
    overflow: auto;
    padding: 10px;

}

#gallery img {
    padding: 15px;
    border: thin black solid;
}

HTML文件的结构：

<div id = "wrapper">
    <div id = "main">

        <div id="gallery">

        </div>

    <div id = "nav">

        <div id = "headline">
              <img src="images/tagline.jpg" />
        </div>

      <ul id="navlist">
          <li><a href="#"><img src="images/btn_home.jpg" /></a></li>
          <li><a href="#"><img src="images/btn_gallery.jpg" /></a></li>
      </ul>

  <div id = "logo">

  </div>

</div>

我对这个问题的篇幅表示道歉，我希望尽可能具体地解决这个问题。希望你能帮助我，我很感激。

如果您需要更多信息，请告诉我，我会尽力帮助您。

亲切的问候，

Snakespan

Answer 1

我想，当#nav居中时，margin-left: 375px;的{{1}}会将其推到右侧。如果你删除它，可能你会得到你需要的东西。

Answer 2

在style.css中你有：

#nav {
...
    margin-left: 375px;
}

通过在左侧应用375px“缓冲区”，这会强制您向右导航。

将其更改为此以将其恢复到中心

#nav {
...
    margin: 0 auto;
}

有定位问题，2个样式表可能发生冲突？

2 个答案: