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

Question

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

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

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

Answer 1

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

Answer 2

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

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

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

Answer 3

Лучшее решение, которое я нашел, это выровнять по центру содержащийся 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>

Answer 4

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

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

Что оставляет два варианта. 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>

Это может приблизить вас.

Answer 5

с использованием 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>

Answer 6

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

Answer 7

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

p { text-align: justify; }