html - 为什么我的悬停命令没有穿过整个栏？浅蓝色应该穿过整个条形，而不是那么多

Question

为什么我的悬停没有穿过整个侧边栏？我需要侧边栏悬停能够穿过整个侧边栏，而不是那么一点点。我将如何解决这个问题？

#main-container {
  display: table;
  width: 100%;
  height: 100%;
}

#sidebar {
  font-family: sans-serif;
  display: table-cell;
  width: 3.7%;
  vertical-align: top;
  background-color: #0E4D92;
}

#sidebar a {
  display: block;
  padding: 10px;
  color: rgba(255, 255, 255);
  margin: 15px 30px 0 0;
  text-decoration: none;
  position: relative;
  left: 30px;
}

#sidebar a:hover {
  background-color: #73C2FB;
}

#content {
  display: table-cell;
  width: 85%;
  vertical-align: top;
  padding: 10px 0 0 10px;
}

<div id="main-container">
  <div id="sidebar">
    <img src="img/LetterLogo.png" />
    <a href="index.html">Home</a>
    <a href="about.html">Order</a>
    <a href="#">Portfolio</a>
    <a href="#">History</a>
    <a href="#"></a>
  </div>
</div>

Answer 1

问题是由您创建 #sidebar a 索引的方式引起的 - 使用 left: 30px 和 position: relative。删除两者，并使用 padding: 10px 10px 10px 40px; 代替。这样，背景将从左边缘开始，文本仍然向内缩进。

#main-container {
  display: table;
  width: 100%;
  height: 100%;
}

#sidebar {
  font-family: sans-serif;
  display: table-cell;
  width: 3.7%;
  vertical-align: top;
  background-color: #0E4D92;
}

#sidebar a {
  display: block;
  padding: 10px 10px 10px 40px;
  color: rgba(255, 255, 255);
  margin: 15px 30px 0 0;
  text-decoration: none;
}

#sidebar a:hover {
  background-color: #73C2FB;
}

#content {
  display: table-cell;
  width: 85%;
  vertical-align: top;
  padding: 10px 0 0 10px;
}

<div id="main-container">
  <div id="sidebar">
    <img src="img/LetterLogo.png" />
    <a href="index.html">Home</a>
    <a href="about.html">Order</a>
    <a href="#">Portfolio</a>
    <a href="#">History</a>
    <a href="#"></a>
  </div>
</div>