Css 如何将这两套编码组合在一起，形成一个大型下拉导航

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

用于下拉导航的JS FIDLE:

然而，我意识到导航上的标题（如主页、5列等）并不是均匀分布的，因为它们是固定的px。因此，我去研究如何才能均匀地分布标题。然后我发现，实际上通过使用cssdisplay:inline和text-justify，我可以做到这一点。对不起，如果你不明白的话。但我也找到了一把js小提琴

JS fiddle使用css进行均匀分布的导航：

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

---

我想知道是否有人知道我能做些什么将这两套编码组合在一起？非常感谢。如果你对我所说的有任何疑问，请告诉我，这样我可以试着重新措辞。谢谢。

所以标题完全展开了，我想你说的是当你更改它们时，下拉列表会奇怪地被抵消。由于以下规则，该问题被处理：

#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事件，并将left设置为正确的位置（#菜单的左侧）

另一个更好的方法是最大限度地使用CSS position属性。我工作得很好。我做了以下修改：

• 新增

  位置：相对至
  #菜单

• 移除

  位置：相对来自
  #菜单li

• 新增

  位置：绝对至
  。下拉列表、.dropdown\u 1列、.dropdown\u 2列、.dropdown\u 3列、.dropdown\u 4列、.dropdown\u 5列

• 设置

  左侧：0px

  ）上的code>，这些规则过去具有特定的像素值

---

这是因为

位置：绝对现在将定位到菜单的位置，而不是像以前那样相对于菜单项。
因此标题完全展开，我假设您所说的是，当您更改它们时，下拉列表会奇怪地偏移。由于以下规则，该问题被处理：

#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事件，并将left设置为正确的位置（#菜单的左侧）

另一个更好的方法是最大限度地使用CSS position属性。我工作得很好。我做了以下修改：


新增
位置：相对至
#菜单

移除
位置：相对来自
#菜单li

新增
位置：绝对至
。下拉列表、.dropdown\u 1列、.dropdown\u 2列、.dropdown\u 3列、.dropdown\u 4列、.dropdown\u 5列

设置
左侧：0px
）上的code>，这些规则过去具有特定的像素值


这是因为
位置：绝对现在将定位到菜单的位置，而不是像以前那样相对于菜单项。
宽度为100%
的元素必须是对齐的内联块的同级元素。在您的情况下，它必须位于
ul
内。看看这里：
宽度为100%

的元素必须是对齐的内联块的同级。在您的情况下，它必须位于

ul

内。请在此处查看：

谢谢您的解释和解决方案……我从中学习。非常感谢…嗯，我想知道诸如“家”、“设计”、“绘画和混合媒体”之类的标题。。。可以均匀分布使用内联属性，如在我的第二次感谢您的解释和解决方案…我的工作从它。非常感谢…嗯，我想知道诸如“家”、“设计”、“绘画和混合媒体”之类的标题。。。可以使用内联属性均匀分布，如我的第二个