使用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> 

Answer 2

您可以通过的langauge您在其中产生

您的网页，通过特定的字符串数字符串的lenght在一起，然后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; 
} 

我还没有尝试过，但我认为应该给它一个类似于表格的行为。