尝试从网站中创建的菜单中删除多余的 space

Question

在我下面提供的代码中，我看到我的 CSS 或 HTML 的某些内容是错误的，因为我使用 http://www.w3schools.com/css/css_navbar.asp 中的示例创建了一个侧边菜单。我将此示例添加到我的网页中，由于某种原因，左侧显示了一些额外的 space，并且它不可点击为 link（它应该是）。我也在这个项目中使用 Aptana Studio 3，由于某种原因，它在 CSS 文件中显示 100vh 的错误，但我认为这不是问题所在。

html {
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.divSize {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
#navmenu {
  float: left;
}
body {
  margin: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding 0;
  width: 15%;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}
li a {
  display: block;
  color: #000;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
li a:hover {
  background-color: #555;
  color: white;
}
li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Home</title>
</head>

<body>
  <div>

    <div align="right" class="divSize">
      <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px">
      <div id="navmenu">
        <ul>
          <li><a class="active" href="#home">Home</a>
          </li>
          <li><a href="#stuff1">Stuff</a>
          </li>
          <li><a href="#stuff2">Stuff</a>
          </li>
          <li><a href="#stuff3">Stuff</a>
          </li>
          <li><a href="#stuff4">Stuff</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>

Answer 1

padding 中的拼写错误适用于 ul- 修正了它，然后就可以了！

html {
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.divSize {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}
#navmenu {
  float: left;
}
body {
  margin: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 15%;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}
li a {
  display: block;
  color: #000;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}
li a:hover {
  background-color: #555;
  color: white;
}
li a.active {
  background-color: #4CAF50;
  color: white;
}
li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <title>Home</title>
</head>

<body>
  <div>

    <div align="right" class="divSize">
      <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px">
      <div id="navmenu">
        <ul>
          <li><a class="active" href="#home">Home</a>
          </li>
          <li><a href="#stuff1">Stuff</a>
          </li>
          <li><a href="#stuff2">Stuff</a>
          </li>
          <li><a href="#stuff3">Stuff</a>
          </li>
          <li><a href="#stuff4">Stuff</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>

</html>

Answer 2

试试这个代码：

html {
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.divSize {
  height: 100vh;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}

#navmenu {
  float: left;
}

body {
  margin: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding 0;
  width: 15%;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}
ul{
  padding: 0;
  margin: 0;
}
li a {
  display: block;
  color: #000;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
}

li a:hover {
  background-color: #555;
  color: white;
}

li a.active {
  background-color: #4CAF50;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}

<body>
  <div>

    <div align="right" class="divSize">
      <img src="images/myimage.png" alt="My Image" style="width: 145px; height: 86px">
      <div id="navmenu">
        <ul>
          <li><a class="active" href="#home">Home</a>
          </li>
          <li><a href="#stuff1">Stuff</a>
          </li>
          <li><a href="#stuff2">Stuff</a>
          </li>
          <li><a href="#stuff3">Stuff</a>
          </li>
          <li><a href="#stuff4">Stuff</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</body>

Answer 3

Web 设计人员倾向于使用的一个好习惯是在 CSS 的第一行中使用包含“*”或通用选择器来去除一些默认边距和填充。

//At the top of your CSS put
*{
    margin: 0;
    padding:0;
}

它会很好地调整space。为了将来参考，我建议使用 bootstrap。它会让你快乐。

尝试从网站中创建的菜单中删除多余的 space

Trying to remove extra space from menu created in website

html

css

image

list

css-float