基本CSS：无序列表超出容器div？

Question

自从我真正进入CSS工作以来已经有点了，我正在尝试用菜单栏进行简单的布局。我们的想法是让一个容器将所有东西都放在屏幕的中央，并有一个菜单栏（无序的内联列表），它运行整个屏幕，但列表项目要包含在容器中。

See this pic for a visual example

PS。我知道这不是真正的“编程”，但这似乎是发布这个问题的最合适的地方。让我知道是否有更好的/ r /为此。

Answer 1

制作ul width: 100%和li float: right

修改 没有意识到你想要ul延伸到窗口的宽度......有点奇怪，但你可以用javascript来实现：

1. 您制作了容器overflow: show
2. 然后用js你得到窗口全宽（不知道现在怎么做，但是用jQuery或mootools应该很容易......）然后制作那个尺寸的ul宽度。
3. 然后将ul padding-rigth设置为(window_width - container_width) / 2
4. make li's float: right

我认为没有javascript是不可能的，除非你修改ul的静态大小（如1600px），但我不推荐这个，因为它只能在1600px分辨率的屏幕上显示

Answer 2

你真正想说的是你想要＃container的孩子＆lt; ul＆gt;打破它的界限，然后你想要它的孙子＆lt; li＆gt;来尊重它的界限。

你的方法会有点混乱，我会推荐一种不同的方法。

Answer 3

就个人而言，我会选择背景图片在容器外添加视觉效果，但我想这可能是用html / css：

1. 添加额外的100％宽度div并将其置于绝对位置以使其超出正常文档流程
2. 将ul放入宽度为1024px且自动边距
的div中
3. 浮动李的权利

您可能还需要在#container中添加一种spacer div，以避免内容落后于菜单栏。