试图从网站中创建的菜单中删除额外的空间答案

【问题标题】：Trying to remove extra space from menu created in website试图从网站中创建的菜单中删除额外的空间
【发布时间】：2016-12-22 06:19:46
【问题描述】：

在下面提供的代码中，我发现我的 CSS 或 HTML 有问题，因为我使用来自 http://www.w3schools.com/css/css_navbar.asp 的示例创建了一个侧边菜单。我将此示例添加到我的网页中，由于某种原因，左侧显示了一些额外的空间，并且它不能作为链接单击（它应该是）。我也在为这个项目使用 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>

【问题讨论】：

也刚刚注意到开始 html 标记中的语言。将其更正为打开 html 标记的 lang。
padding 0; 应该是 padding: 0;。与错字有关的问题是题外话。只需使用浏览器的开发工具作为调试器。查看盒子模型，查看应用的 CSS 规则。然后您应该注意到缺少padding 规则。仔细查看padding 规则，您会发现语法错误。
刚刚改了代码。感谢您的意见！

标签： html css image list css-float

【解决方案1】：

试试这个代码：

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>

【讨论】：

【解决方案2】：

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

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

它会很好地调整空间。为了将来参考，我建议使用引导程序。它会让你快乐。

【讨论】：

感谢您的意见！事实证明，它对我迄今为止从事的许多网络项目都有帮助

【解决方案3】：

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>

【讨论】：