Html 如何使盒子的边缘相同？

我正在制作一个链接的垂直列表，但我不想要纯文本，我想要一个背景。我添加了这个，并设置了“正确填充”并添加了25px。在这之后，我注意到大小因文本而异

我意识到我可以在HTML中编辑它，但我也希望它根据是否悬停而改变

另外，我尝试设置宽度，但没有效果

提前谢谢

HTML

---

目前，为

a

元素指定了背景色和填充，这些元素的大小因其内容而异，因为它们是内联的。这也是为什么不能更改锚点的宽度-它们是内联的，而不是块

您最好将背景色和边框样式移动到

li

元素中，并添加一点边距和宽度以将其展开。例如：

#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
  background-color:#B2FF99;
  border:1px solid black;
  margin: 5px;
  width: 40%;
}

---

如果从

#sidelinksleft

中删除宽度：90%，然后添加以下内容，则它们最终将成为相同的大小：

因此，这是在扩展所有

a

元素，以填充其父元素的100%，而父元素又是最大子元素的宽度

仅供参考，如果希望整个区域触发链接，则需要将其应用于

a

元素（不仅仅是

li

）

#sidelinksleft{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
}

#sidelinksleft li{
position:relative;
top:2px;
padding-right:20px;
list-style-type: none;
}

#sidelinksleft li a{
color:#777777;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B2FF99;
height:17px;
position:relative;
border:1px solid black;
padding-right:25px;
}

#sidelinksleft li a:hover{
color:#a3a3a3;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#sidelinksleft li a:active{
color:#00B2EE;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}

#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
  background-color:#B2FF99;
  border:1px solid black;
  margin: 5px;
  width: 40%;
}

#sidelinksleft li a {
    width:100%;
    display:block;
    margin-bottom:2px;
}