CSSを使用して、親の幅全体を占める複数の要素を作成します。

Question

<a>要素のすべてを組み合わせて、親の幅全体に拡大する水平CSSメニューバーを実現しようとしています。

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

アイデアはHomeの左側とエッジとのContact Usラインアップの右側になるように全幅の一部％を取る上記の4つの<a>の各要素です：HTMLは次のようになります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

あなたはあなたが全体のメニューのpercentual一部を取得legth特定の文字列で一緒にして、文字列のな長さをカウントすることができ、あなたのページ

を生成しているのlangaugeで、それを扱うことができます。

<?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; 
} 

私はそれを試したことはありませんが、それはテーブルのような動作を与えるはずです。