CSS麻烦，为什么它会自己移动？答案

【问题标题】：CSS Trouble, Why does it move itself?CSS麻烦，为什么它会自己移动？
【发布时间】：2010-04-21 18:55:50
【问题描述】：

我被困在 CSS 部分，正在帮助一位朋友在她的网页上实现一件事。它是一个下拉菜单，我让一切都按照我想要的方式工作。我的问题是它自己移动到行首？

http://gazet.se/TestPages/Test.aspx

如何让它居中？

（我已经去掉了已经解决的代码以减小尺寸）

【问题讨论】：

标签： javascript css

【解决方案1】：

菜单有一个名为#jsddm的ID

#jsddm {
float:left;
margin:0;
padding:0;
}

删除左浮动 - 这是第一步。第二件事，您应该将菜单全部放在一个列表中，其中子级别作为嵌套列表并摆脱 img 分隔符 - 它们可以通过 css 添加为背景图像。我建议您为菜单创建一个新结构。这是一篇很好的文章来解释它http://www.alistapart.com/articles/dropdowns/

基本上，您所要做的就是向#jsdm 添加额外的<li> 元素并将所有菜单链接移到其中。

【讨论】：

这样更好，但我如何添加分隔符图像？并使其居中？
另外，上面那行有一些裂痕？
您可以将它们添加为列表项的背景图像。 #jsdm li {background:url(separator.gif) no-repeat center right;} 对于不需要分隔符的最后一项，只需在 li 上添加一个名为“no_separator”的类或类似的东西，这样它就会重置并看起来像.no_separator {background-image:none;} 在 css 中。
一切正常，除了居中，我怎样才能让它再次居中？
如果你在菜单上有一个固定的宽度，你可以添加一个边距：0 auto;如果不是，您必须更改 display:inline on ul ,li 和 a 但注意不要覆盖菜单的第二级（下拉部分）。

【解决方案2】：

菜单是浮动块元素，而它周围的元素是内联元素，基本不能混用。您需要让#header_menu 中的所有元素也浮动，或者让菜单也内联。（但我不确定，后者是否可行）。

【讨论】：