Используйте 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

Вы можете иметь дело с языком, на котором вы генерируете свои страницы

Вы можете посчитать длину строк вместе, а затем по определенной длине строки получить процентную часть всего меню.

скрипт, считающий

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

Хотя в 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 3

Полагаю, это зависит от требований (IE6 ...), но вы можете попробовать использовать:

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

Я не пробовал это, но я думаю, что это должно придать ему табличное поведение.