html - 如何使 标签的大小与其父 标签的大小相同？

Question

我和这个人在这里问过同样的问题:How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?

但是我希望这些 LI 元素像内联菜单一样，所以我不希望它们彼此列出。如何激活？

Answer 1

有许多不同的选项，这里有一个很容易定制:http://jsfiddle.net/panchroma/WuhVp/
HTML

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
<li><a href="#">four</a></li>
<li><a href="#">five</a></li>
</ul> 
</div>

CSS

#navcontainer ul
{
padding-left: 0;
margin-left: 0;
background-color: olive;
color: White;
float: left;
width: 100%;
font-family:sans-serif;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
padding: 0.2em 1em;
background-color: olive;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}