1

我正在制作链接的垂直列表，但我不想要纯文本，我想要背景。我已经添加了这个，并设置了“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;
}
4

2 回答 2

2

If you remove width:90% from #sidelinksleft and then add the following they will end up as the same size:

jsFiddle

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

So what this is doing is expanding all a elements out to fill 100% of its parent which in turn is width of the largest child.

FYI You need to apply it to the a element (not just li) if you want the entire area to trigger the link.

于 2013-06-28T00:07:07.483 回答
1

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

You'd probably be better off moving your background color and border styles to the li elements, and adding a little margin and width to spread them out. Example:

#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
  background-color:#B2FF99;
  border:1px solid black;
  margin: 5px;
  width: 40%;
}
于 2013-06-28T00:07:03.457 回答