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>

Answer 2

您可以通过生成页面的语言来处理

您可以将字符串的长度计算在一起，然后通过特定字符串legth获取整个菜单的百分比部分。

正在计算的脚本

<?php
// percentageCounter.php
$menuItems = array(
 'home'=>array('label'=>'Home'),
 'learn'=>array('label'=>'Learn More About The Product',),
 'about'=>array('label'=>'About Us',),
 'contact'=>array('label'=>'Contact Us',),
 'str_len_sum' => 0,
);
foreach($menuItems AS $key => $menuItem)
{
  $menuItems['str_len_sum'] += strlen($menuItem['label']);
}

foreach($menuItems AS $key => $menuItem)
{
  $menuItems[$key]['percentage'] = (100/$menuItems['str_len_sum'])*strlen($menuItem['label']);
}

正在打印菜单

<?php //menuOutput.php
require_once 'percentageCounter.php';
?>
<div id="parent">
<?php foreach($menuItems AS $key => $menuItem): ?>
    <a href="/<?php echo $key ?>" style="width: <?php echo $menuItem['percentage'] ?>%;"><?php echo $menuItem['label'] ?></a>
<?php endif; ?>
</div>

Answer 3

我想这取决于要求（IE6 ......），但您可以尝试使用：

#parent {
    display: table-row;
}
#parent a {
    display: table-cell;
}

我没有尝试过，但我认为应该给它一个像表格一样的行为。

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

3 个答案: