1

一开始我正在研究如何创建一个大型下拉导航，因此我在网上搜索并开始意识到定义每个下拉菜单的宽度和位置是最好的。对不起，如果你不明白，但我也找到了一个 js.fiddle 。

用于下拉导航的 JS 小提琴：http: //jsfiddle.net/Pnn6V/9/。

但是，我意识到导航上的标题（例如，主页、5 列等）并没有均匀分布，因为它们分布在固定 px 上。因此，我开始研究如何均匀分布标题。然后我发现实际上通过使用 CSS display: inline with text justify 我可以做到这一点。对不起，如果它让你感到困惑。但我也为此找到了一个 js fiddle。

使用 css 均匀分布导航的 JS 小提琴：http: //jsfiddle.net/NGLN/dqBNr/3/

我厌倦了通过添加 span 标签和 justify 属性将它们组合在一起，我还将显示更改为 inline 和 inline-block 但整个事情都搞砸了。

我想知道是否有人知道我该怎么做才能将这两组编码组合在一起？非常感谢。如果您对我在说什么有任何疑问，请告诉我，以便我尝试改写它。谢谢。

4

2 回答 2

1

所以标题完全展开，我假设你在谈论当你改变它们时，下拉菜单会奇怪地偏移。由于以下规则，此问题正在处理：

#menu li:hover .dropdown_1column
{
    left:-841px;
    top:auto;
}
#menu li:hover .dropdown_2columns
{
    left:-2px;
    top:auto;
} 
#menu li:hover .dropdown_3columns
{
    left:-736px;
    top:auto;
}
#menu li:hover .dropdown_4columns
{
    left:-248px;
    top:auto;
}  
#menu li:hover .dropdown_5columns {  
    left:-110px;  
    top:auto;  
}

有几种方法可以解决这个问题。一种方法是使用 JavaScript/jQuery 附加到 onhover 事件并将左侧设置为正确的位置（#menu 的左侧）。

另一种更好的方法是充分利用 CSS 位置属性。我让这个 jsfiddle工作正常。我做了以下更改：

  • 添加position:relative;到#menu
  • 已从position:relative;_#menu li
  • 添加position:absolute;到.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns
  • 在所有曾经具有特定像素值left:0px;的悬停规则（例如）上设置。#menu li:hover .dropdown_1column

这是有效的，因为position:absolute;下拉菜单上的现在将定位到菜单的位置，而不是像以前那样相对于菜单项。

于 2012-08-21T01:39:34.717 回答
0

带有 的元素width: 100%必须是对齐的内联块的兄弟。在您的情况下，它必须在ul. 看看这里：http: //jsfiddle.net/dqBNr/21/

于 2012-08-21T02:25:16.183 回答