Question

我正在开发一个投资组合网站模板，该模板在＆gt; = 1024px的显示屏左侧有一个垂直的全高菜单，在移动显示屏上有一个水平的全宽下拉菜单。问题是我的下拉菜单项（文本本身，而不是下拉菜单）略微向右偏移而不是居中。我玩过我的CSS，我似乎无法弄明白。有人可以帮忙吗？

$('#nav-status').click(function(e) {
  e.preventDefault();
  $('#navigation').toggle();
});

html,
body {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/wood-dark.png");
  overflow-x: hidden;
  font-family: "Oswald", sans-serif;
  color: white;
  text-align: center;
}


/*mobile rules*/

@media screen and (max-width: 1023px) {
  #nav-status {
    display: block;
    width: 100%;
    height: 32px;
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.75);
  }
  ul {
    display: none;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    overflow: hidden;
    color: white;
  }
  li h1 {
    font-size: 1.5em;
  }
  ul li {
    width: 100%;
    min-height: 32px;
    padding: 2px;
    display: block;
    position: relative;
    text-align: center;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 1em;
    text-decoration: none;
  }
}


/*desktop rules*/

@media screen and (min-width: 1024px) {
  #nav-status {
    display: none;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 20%;
    background-color: rgba(0, 0, 0, 0.85);
    height: 100%;
    position: fixed;
    overflow: hidden;
  }
  li h1 {
    font-size: 3em;
  }
  ul li {
    color: white;
    margin: auto;
    width: 50%;
    padding: 2px;
  }
  li a:link,
  a:visited,
  a:active {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
  }
  li a:hover {
    color: #ba1d30;
    font-family: "Oswald", sans-serif;
    font-size: 2em;
    text-decoration: none;
    font-style: italic;
  }
}

<body>
  <div>
    <a href="#" id="nav-status"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1671394/nerdcatkiss.png" alt="Kissy Cat"></a>
    <ul id="navigation">
      <li>
        <h1>Explore</h1>
      </li>
      <li>
        <a href="#">Web Pages</a>
      </li>
      <li>
        <a href="#">Games</a>
      </li>
      <li>
        <a href="#">Productivity</a>
      </li>
      <li>
        <a href="#">Project 4</a>
      </li>
    </ul>
  </div>
</body>

Here is a link to my Codepen in case that helps.

Answer 1

您对ul元素进行了一些填充。

做ul { padding : 0; }。就是这样。

如何将下拉菜单项置于中心位置？

1 个答案: