為什么我的懸停命令沒有穿過整個欄？ 淺藍色應該穿過整個條形，而不是那么多

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>