html - 使用CSS创建多个占据父级整个宽度的元素

Question

我正在尝试实现水平 CSS 菜单栏，其中所有 <a>元素组合扩展到父级的整个宽度。 HTML 看起来像这样:

<div id="parent">
    <a href="/">Home</a>
    <a href="/learn">Learn More About The Product</a>
    <a href="/about">About Us</a>
    <a href="/contact">Contact Us</a>
</div>

想法是四个中的每一个<a>上面的元素占据了总宽度的一部分，因此 Home 的左侧和 Contact Us 的右侧与 parent 的边缘对齐.它们不能分别占 25%，否则“详细了解产品”会显得很傻，因为它太长了。

有什么想法吗？

Answer 1

虽然在 CSS 中没有直接的方式说“自动将这些放置在屏幕上占据整个宽度”(表格的单元格将自动调整自身大小的方式)，但您仍然可以将宽度指定为明确的百分比:

<div id="parent">
    <a href="/" style="width: 20%;">Home</a>
    <a href="/learn" style="width: 40%;">Learn More About The Product</a>
    <a href="/about" style="width: 20%;">About Us</a>
    <a href="/contact" style="width: 20%;">Contact Us</a>
</div>