在DIV中，链接重叠后溢出到一个新行

Question

我仍然试图用CSS等取得整个jQuery概念。我正在试图制作一个简单的导航栏，其中有一个隐藏的DIV。我将从看起来像一个开始按钮开始，点击时会引发一个切换（）来显示或隐藏其上方隐藏的DIV，在这种情况下，会使菜单栏从页面顶部出现。我的问题是，我正在设置链接以便它们填满水平线，然后当没有更多空间时，它们将在DIV内填充下一行。当发生这种情况时，他们进入一个新的行，但它稍微坐在它上面的行的顶部，而不是排队。如果有人能告诉我如何让这个更有组织，我会欣赏它，我甚至愿意为替代方式安置他们，即有链接填满一列，然后当它触及底部在div，开始新的科拉姆和填充从上到下，等我有和无的URL到目前为止已经试过，所以这是我目前有：

的HTML：

<div id="hidden-bar"> 

     <ul id="hidden-bar"> 

     <li><a href="##">Admin Menu</a></li> 
     <li><a href="##">Home</a></li> 
     <li><a href="##">Report Menu</a></li> 
     <li><a href="##">Alt. Report Menu</a></li> 
     <li><a href="##">Summary Menu</a></li> 
     <li><a href="##">Comparison Menu</a></li> 
     <li><a href="##">Editor Menu</a></li> 
     <li><a href="##">Hourly Reports Menu</a></li> 
     <li><a href="##">Constants Menu</a></li> 

     </ul> 
    </div> 

    <div id="pull-down"></div> 

CSS：

#hidden-bar { 
    background-color: #323232; 
    height: 110px; 
    width: 100%; 
    display: inline-block; 
    overflow:auto; 
    padding-top: 12px; 
    color: #FFFFFF; 
    clear:both; 
    } 

    #hidden-bar ul { 
    list-style-type:none; 
    display:block; 
    } 
    #hidden-bar li { 
    display:inline; 

    } 

    #hidden-bar a { 
    background-color:#AAAAAA; 
    font:Verdana, Arial, Helvetica, sans-serif; 
    font-size:12px; 
    color:#323232; 
    display:inline; 
    padding: 5px 10px 5px 10px; 
    border: 3px solid #000000; 
    margin-bottom: 4px; 
    width: 105px; 
    } 

    #hidden-bar a:hover { 
    background-color:#FEFADE 

    } 

    #pull-down { 
    background-image:url('./images/pull_down.jpg'); 
    background-repeat:no-repeat; 
    height: 20px;  
    } 

jQuery的工作到目前为止，所以我不会包含该代码，它基本上是j用一个onclick（）编码来运行id =“hidden-bar”的切换。

的几个注意事项：

1. 这是一个.CFM文件中运行（我使用的ColdFusion为主，柜面这会影响任何主观判断，但是这就是我必须用我的工作）。我提到这件事发生任何冲突，但到目前为止，其他许多jQuery功能都运行良好，所以我怀疑它是一个cfm文件是一个问题。

2. 我有所有这些不同的样式表，因为我只是有时没有UL/LI标签，有时也会有修饰，所以这就是为什么在那里可能会有一些样式表，比如一个用于UL，一个用于LI，一个用于“a”标签。

我的问题是，虽然有很多TUTS在那里为这些jQuery的导航条，没有人真正进入解释如何使所有的按钮独立的和做什么柜面他们相互重叠，或不要解释功能如何在概念/英文方面起作用。提前致谢。

Answer 1

你的代码有点重叠和混乱。你需要的是更好地理解你的CSS在做什么。您可以在不使用任何Javascript的情况下实现结果。

我简化你的代码对你一点，但如果你想你可以改变它。

首先，您有2个元素ID hidden-bar。所以当你的样式表渲染页面时，它实际上将#hidden-bar样式分配给它的下面的div和ul。

你可以做的只是从ul中删除该ID，并在稍后将其作为div的子项。

<div id="hidden-bar">  
    <ul>   
     <li><a href="##">Admin Menu</a></li> 
     ... 

您现在可以div样式将通过这个应用：

#hidden-bar 
{ 
    background-color: #323232; 
    height: auto; 
    width: 650px; 
    float: left; 
} 

及其子ul将样式通过这样的：

#hidden-bar ul 
{ 
    list-style: none; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

夫妇的事情，这里要注意。首先，div和ul元素已经是block-level元素，所以不需要声明它们为display: inline-block。其次，ul元素默认具有填充和边距，所以在添加内容之前应将其重置为0。

的代码的其余部分是这样的：

#hidden-bar li 
{ 
    display: block; 
    float: left; 
    margin: 5px 5px; 
    text-align: center; 
    width: 120px;   
} 

#hidden-bar li a 
{ 
    background-color: #AAAAAA; 
    font: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #323232; 
    border: 1px solid #000000; 
    display: block; 
} 

#hidden-bar a:hover 
{ 
    background-color: #FEFADE; 
} 

它们浮到左边基本上意味着一切推到左侧下一个父块元素内。所以为了正确工作，所有的块元素都必须浮动。

li和a元素inline默认情况下不会阻塞，所以我指定我想li的是块这样我就可以把它们飘浮。

我设置margin和width属性li的而不是a的，因为它们是最外层的元素。它们都设置为120px，因为它们中最大的填充大约120px，所以现在它们看起来都一样。

菜单的总宽度应该接近您想要的菜单项数量的倍数，因为它看起来不错。如果我想5菜单项：

5 *（120像素宽度+ 5像素左边距+ 5px的右边缘） = 5 * 130px = 650像素总宽度

如果您设置的div是649px你会得到这样的：

希望帮助明确的事情你并帮助你解决你的问题。