html - CSS布局问题

Question

我需要显示以下列表，其中 li 中的每个 a 标签都占据了 ul 的整个宽度。 ul的宽度为500px；

<ul>
<li><a href="#">Home</a>a href="#">Home</a></li>
<li><a href="#">About us</a><a href="#">About us</a><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQs</a><a href="#">FAQs</a></li>
<li><a href="#">Contact us</a></li>
</ul>

即:如果li只有1个a，则a标签的宽度为100%，如果有3个，则a标签的宽度为33%。

我知道我可以做 li class="has3elements"等等，但是有没有更简洁的方法来做到这一点？

Answer 1

我宁愿给封闭的 ul 元素一个 id='navbar' 并按以下方式定义属性

#navbar {/*properties for ul*/}
#navbar a {/*properties for a element*/}
#navbar li (/*properties for li element*/}

这应该允许您控制多个无序列表元素，而不会用不同的类使您的 css 困惑。