Question

所以我希望我的导航栏居中，但我似乎无法修复它。它略微向右。我已经查看了inspect元素，也找不到任何东西。我还使用@media在调整大小时使导航更小，并且它仍然稍微向右。

代码：

html,
body {
  margin: 0px;
  padding: 0px;
}
.header {
  background-image: url(../Images/testimg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  height: 100px;
  max-width: 100% !important;
}
#box {
  /* How long the width of the box is */
  max-height: 100%;
  max-width: 100%;
  /* The height the box around the site is */
  /* Div style to set the content of the site into the middle */
  text-align: center;
  margin: 0 auto;
  margin-top: -15px;
}
#top {
  /* Style of top */
  font-family: 'GoudyOldStyleT-Bold', 'Goudy Old Style';
  word-wrap: break-word;
  font-size: 42px;
  font-style: italic;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 70px;
  margin: 0px;
  padding-top: 30px;
  color: #000000;
  opacity: 0.6;
  padding-bottom: 0px;
}
#toptop {
  /* Style of top top */
  font-family: 'LucidaCalligraphy-Italic', 'Lucida Calligraphy';
  word-wrap: break-word;
  font-size: 42px;
  font-style: italic;
  font-variant: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 70px;
  margin: 0px;
  padding-top: 30px;
  color: #000000;
  text-align: center;
  padding-bottom: 0px;
}
#menu {
  list-style-type: none;
  display: none;
}
#menu li a {
  font-family: 'GoudyOldStyleT-Bold', 'Goudy Old Style';
  font-size: 17px;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  letter-spacing: 0;
  word-wrap: break-word;
  line-height: 30px;
  text-decoration: none;
  color: rgb(94, 100, 148);
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  /* proper property */
  transition: .5s;
}
#menu li a:hover {
  /* When cursor hover over button */
  color: #000000;
}
@media screen and (max-width: 667px) {
  #nav {
    /* The position of the nav bar*/
    display: none
  }
  #menu {
    list-style-type: none;
    display: inline-block;
  }
}
#nav {
  /* The position of the nav bar*/
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
#nav li {
  display: inline-block;
}
#nav li a {
  /* The style of the nav bar */
  font-family: 'GoudyOldStyleT-Bold', 'Goudy Old Style';
  font-size: 17px;
  font-style: normal;
  font-variant: normal;
  font-weight: 700;
  letter-spacing: 0;
  word-wrap: break-word;
  line-height: 21px;
  padding-top: 15px;
  padding-left: 40px;
  text-decoration: none;
  color: rgb(94, 100, 148);
  margin-top: 20px;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  /* proper property */
  transition: .5s;
}
#nav li a:hover {
  /* When cursor hover over button */
  color: #000000;
}
#decoline {
  background-color: #000;
  color: #ccc;
  height: 3px;
  margin-top: 14px;
  box-shadow: 1px 2px 1px #888888;
  max-width: 100%;
}
.footer {
  background-repeat: repeat-x;
  background-position: top left;
  bottom: 0;
  left: 0;
  max-width: 100%;
  height: 100px;
}
.slider {
  padding-top: 50px;
  position: relative;
  margin: 0 auto;
}
.bx-wrapper .bx-viewport {
  background-color: transparent;
  /* ????????????
	height: 328px !important;
	width: 560px !important;  */
  margin: 0 auto;
  max-height: 20% !important;
  max-width: 30% !important;
}
@media screen and (max-width: 667px) {
  .bx-wrapper .bx-viewport {
    background-color: transparent;
    max-height: 10% !important;
    max-width: 40% !important;
    margin: 0 auto;
  }
}

<body>

  <div class="header">

    <p id="toptop">text</p>
    <!-- Banner -->
  </div>
  <div id="decoline" />
  <div id="box">
    <!-- A div, I created for the content + middle -->

    <p id="top">text</p>


    <ul id="nav">
      <!-- Start of Nav div -->
      <li><a href="1.html">1</a>
      </li>
      <li><a href="2.html">2</a>
      </li>
      <li><a href="3.html">3</a>
      </li>
      <li><a href="4.html">4</a>
      </li>
      <li><a href="5.html">5</a>
      </li>
      <li><a href="6.html">6</a>
      </li>
    </ul>
    <!-- End of Nav div -->
    <ul id="menu">
      <!-- Start of Nav div -->
      <li><a href="1.html">1</a>
      </li>
      <li><a href="2.html">2</a>
      </li>
      <li><a href="3.html">3</a>
      </li>
      <li><a href="4.html">4</a>
      </li>
      <li><a href="5.html">5</a>
      </li>
      <li><a href="6.html">6</a>
      </li>
    </ul>

    <!-- End of Nav div -->


    <div class="slider">
      <ul class="bxslider">
        <li>
          <img src="../Images/Welcome/dog.jpg" />
        </li>
        <li>
          <img src="../Images/Welcome/0025.jpg" />
        </li>
        <li>
          <img src="../Images/Welcome/IMG_0061.jpg" />
        </li>
      </ul>
    </div>


    <div class="footer">
      <div id="decoline" />
    </div>
  </div>
</body>

Answer 1

将此添加到您的css顶部：

* {
    margin: 0;
    padding: 0;
}

或将*选择器添加到＆＃34; body，html＆＃34;之一：

html,
body,
* {
    margin: 0;
    padding: 0;
}

您的重置样式不够覆盖，可以在以下位置找到一个好的示例：http://cssreset.com/scripts/eric-meyer-reset-css/

Answer 2

您的列表项中的链接有一个40左右的填充。修复它和您的所有设置

Answer 3

#nav {
    margin-left:auto;
    margin-right: auto;
}

也许这会有所帮助？

Answer 4

由

修复

a1.channels = c1
a1.sinks = k1
a1.sinks.k1.type = file_roll
a1.sinks.k1.channel = c1
a1.sinks.k1.sink.directory = /var/log/flume

由等同于ul { padding: 0; }的浏览器样式引起，例如在chrome中它实际上是ul {padding-left: 40px}

我似乎无法集中我的导航栏

4 个答案: