Question

我正在制作一个垂直的链接列表，但我不想只是纯文本，我想要一个背景。我添加了这个，并设置了“padding-right”并添加了25px。在此之后，我注意到尺寸因文本而异。

我意识到我可以在HTML中编辑它，但我也希望它能够根据它是否被徘徊而改变。

另外，我尝试设置宽度，但这不起作用。

提前致谢。

HTML

<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
</ul>

CSS

#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;
}

Answer 1

如果您从#sidelinksleft移除宽度：90％，然后添加以下内容，它们将以相同的大小结束：

jsFiddle

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

所以这样做是将所有a元素扩展为填充其父元素的100％，而父元素又是最大子元素的宽度。

仅供参考您如果希望整个区域触发链接，则需要将其应用于a元素（而不仅仅是li）。

Answer 2

目前，您的a元素指定了背景颜色和填充，这些元素的大小因内容而异，因为它们是内联的。这也是你无法改变锚点宽度的原因 - 它们是内联而不是块。

您可能最好将背景颜色和边框样式移动到li元素，并添加一些边距和宽度以展开它们。例如：

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

如何使盒子的边缘相同？

2 个答案: