Базовый CSS: неупорядоченный список выходит за пределы контейнера div?

Question

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

См. Этот рисунок для наглядного примера

пс. Я знаю, что это не настоящее «программирование», но это казалось наиболее подходящим местом для размещения этого вопроса. Дайте мне знать, если есть лучшее / г / для этого.

Answer 1

То, что вы на самом деле говорите, это то, что вы хотите, чтобы # контейнерный ребенок

• уважал его границы.

  Ваш подход будет немного грязным, и я бы порекомендовал другой подход.

Answer 2

Лично я бы пошел на фоновое изображение, чтобы добавить визуальные эффекты вне вашего контейнера, но я думаю, что это возможно с html / css:

1. Добавить дополнительную ширину 100% div и положениеэто абсолютное значение, так что оно выходит за пределы обычного потока документов
2. Поместите ul в этот div с шириной 1024px и автоматическими полями
3. Плавающее право li

Возможно, вам также придется добавить своего рода разделительный элемент div в #container, чтобы избежать попадания содержимого в строку меню.

Answer 3

сделать ul width: 100% и li's float: right

Edit: не поняла, что вы хотите, чтобы ul расширялся до ширины окна ... странно, но вы можете сделать это с помощью javascript:

1. вы делаете контейнер overflow: show
2. затем с помощью js вы получите полную ширину окна (не знаю, как это сделать прямо сейчас, но это должно быть легко с jQuery или mootools ...), а затем сделаете ul ширину этого размера.
3. затем вы устанавливаете ul padding-rigth на (window_width - container_width) / 2
4. сделать Ли float: right

Я думаю, что это невозможно без javascript, если вы не исправите статический размер для ul (например, 1600px), но я не рекомендую этого, поскольку он будет отображаться нормально только на экранах с разрешением 1600px