Как я могу выстроить блочные элементы в ряд?

Question

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

Спасибо за любую помощь. Mike

Answer 1

Если вы перемещаете блочные элементы, они будут помещены в горизонтальный ряд (с динамической шириной, если вы не укажете фиксированный).

ul#navigation li {
    float: left;
}

Посмотрите HTML-код для навигации на этой странице, например (Вопросы, Теги, Пользователи, ...)

Answer 2

Как уже упоминалось выше, встроенные блоки - это путь. Эта статья о Mozilla будет полезна для работы во всех браузерах.

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 3

Я бы пошел с display: inline-block для общего параллельного отображения, но вы пытаетесь выполнить горизонтальную навигацию. Я бы не стал использовать отображение ячеек таблицы, так как это странно, и вам в конечном итоге придется устранять другие ошибки.

html:

• Некоторая ссылка
• Некоторая ссылка 2
• Некоторые три ссылки

css:
#navigation {
ширина: 550px;
поле: 0;
отступ: 0;
list-style-type: нет;
переполнение: скрыто;
}
#navigation li {
плавать: слева;
}

# навигация li a, # навигация li a: hover {
дисплей: блок;
отступы: 4px 21px 4px 20px;
текстовое оформление: нет;
}

Answer 4

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

Answer 5

дисплей: встроенный блок