Verwenden Sie CSS, um mehrere Elemente zu erstellen, die die gesamte Breite des übergeordneten Elements einnehmen

Question

Ich versuche, eine horizontale CSS-Menüleiste zu erreichen, in der alle <a> Elemente auf die gesamte Breite des übergeordneten Elements erweitert werden. Der HTML-Code sieht wie folgt aus:

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

Die Idee ist, jedes der vier <a> Elemente über einige% der Gesamtbreite einnehmen, so dass die linke Seite des Home und die rechte Seite der Contact Us einer Linie mit den Rändern von parent. Sie können nicht jeweils genau 25% aufnehmen, sonst würde "Mehr über das Produkt lernen" doof aussehen, weil es zu lang ist.

Irgendwelche Ideen?

Answer 1

Während es in CSS keinen direkten Weg gibt zu sagen: "Diese automatisch über den gesamten Bildschirm positionieren" (so wie sich die Zellen einer Tabelle automatisch skalieren), können Sie die Breiten trotzdem als explizite Prozentsätze angeben :

<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

Sie können es von Langauge beschäftigen, in dem Sie Ihre Seiten

Sie erzeugen Länge der Saiten zusammen und dann durch bestimmte Zeichenfolge zählen legth den prozentuellen Teil ganzen Menüs.

Das Skript, das

<?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']); 
} 

Und der zählt das Menü druckt

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

Ich denke, es von den Anforderungen abhängt (IE6 ...), aber Sie könnten versuchen, mit:

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

Ich habe es nicht versucht, aber ich denke, dass sollte es ein tabellenartiges Verhalten geben.