Распространение встроенных элементов с помощью CSS

Есть ли простой способ распределить встроенные элементы в контейнере родительского блока с помощью CSS? Установка для полей значения auto не работает, поскольку поля между встроенными элементами установлены на 0, и я не хочу возиться с процентами, поскольку содержимое является динамическим.

В частности, у меня есть несколько якорных элементов (а) в абзаце (p), который занимает 80% его контейнера, и я ищу простой способ равномерно распределить их внутри абзаца.

РЕДАКТИРОВАТЬ (@cletus): абзац не будет переноситься, и якоря - единственное, что в абзаце. Под равномерным распределением я подразумеваю, что пространство между левым (правым) краем и первым (последним) элементом и самими элементами равноудалено.

Ответов (7)

Решение

Хммм, мне кажется, вы создаете меню? Возможно, вы захотите использовать список для хранения ваших якорей и соответствующим образом стилизовать список. Это общепринятая передовая практика.

Что касается равномерного распределения элементов, я вчера искал что-то подобное, я надеялся, что это будет в спецификации CSS3, но это не так (по крайней мере, я не могу его найти), что кажется серьезным провалом, если вы спросите меня. В любом случае...

Остается два варианта. CSS и Javascript.

В CSS используйте свойство margin-right для каждого элемента. Хорошая идея - создать класс .last, который устанавливает для параметра margin-right значение ноль, что предотвращает нарушение макета последним элементом.

Есть множество javascripts, которые сделают это за вас. Я предпочитаю использовать JS только тогда, когда это абсолютно необходимо, поэтому я не мог комментировать, какой из них лучше.

... есть еще кое-что, что вы могли бы попробовать, но ... вы не слышали этого от меня, хорошо?

Вы можете использовать стол. Это самый быстрый (и самый грязный) способ получить желаемое.

ИМХО, и вы, наверное, не хотите этого слышать, но дизайн, вероятно, недоработан. Общеизвестно, что равномерное распределение элементов по макету с помощью CSS - проблема, поэтому дизайнерам следует избегать этого.

ОБНОВЛЕНИЕ: вы также можете попробовать

.link_container { text-align: center; }
.link_container a { margin-right: 10x; }
.last { margin-right: 0; }

затем используйте что-то вроде этого

<div class='link-container'>
    <a href='...'>Some line</a>
    <a href='...'>Some line</a>
    <a href='...'>Some line</a>
    <a class='last' href='...'>Some line</a>
</div>

Это могло бы вас приблизить.

Немного неясно, что вы имеете в виду под «равномерным распределением»; Может быть, вы хотите оправдать содержание абзаца?

p { text-align: justify; }

у ваших якорей задана определенная ширина? Я думаю, что это может быть необходимо для работы любого маржинального авто.

использование display: table в контейнере и display: table-cell для элементов внутри, похоже, помогает мне. Работает даже в IE8

<!DOCTYPE html>
<html>
<head>
<!-- insert reset CSS here -->
    <style type="text/css">
    #header {
        width: 940px;
        margin: 0 auto;
        background-color: #E6EFE6;
    }

    #main_nav {
        width: 100%;
        display: table;
    }

    #main_nav .nav-item {
        display: table-cell;
        text-align:center;
    }
    </style>
</head>
<body>
<div id="header">
    <ul class="" id="main_nav">
        <li class="nav-item first">
            <a href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item last">
            <a href="#">Item 3</a>
        </li>
    </ul>
</div>
<body>
</html>

К сожалению, это невозможно с помощью CSS. Однако в особом случае, когда ваши элементы имеют одинаковую ширину, этот CSS-хакер делает это довольно легко.

При равноудаленном расстоянии между элементами переменной ширины недостаточно даже указания ширины в процентах для каждого контейнера элемента. Это все равно создаст переменную ширину между элементами.

Вероятно, это возможно сделать с помощью JavaScript в большинстве современных браузеров. Вот пример страницы, демонстрирующий плохо реализованный взлом JavaScript и доказательство того, что попытка использовать выравнивание текста для решения этой проблемы не будет работать надежно.

Если CSS3 приемлем (т. Е. Если то, как он выглядит в IE6, не имеет первостепенного значения), вы можете использовать значения свойств display «table» и «table-cell», чтобы использовать модель отображения таблицы с любым типом элемента; Также следует учитывать "inline-block", который действует как блок, не прерывая новую строку.

Лучшее решение, которое я нашел, - выровнять по центру содержащий div, а затем дать каждой из ссылок фиксированное и разумное левое и правое заполнение, которое может вместить как длинные, так и короткие ссылки. Хотя это не приведет к равномерному распределению ваших ссылок по всей верхней панели, это обеспечит визуально приятный эффект.

<div style='text-align:center'>
    <a style='padding-left:10px;padding-right:10px'>Link 1</a>
    <a style='padding-left:10px;padding-right:10px'>Link 2</a>
    <a style='padding-left:10px;padding-right:10px'>Link 3</a>
</div>