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

我仍在尝试用CSS之类的东西来理解整个jQuery概念。我正在尝试制作一个简单的导航栏，其中有一个隐藏的DIV。我将从一个看起来像“开始”按钮的东西开始，单击该按钮将启动一个切换（）以显示或隐藏其上方的隐藏DIV，在这种情况下，将使菜单栏显示在页面顶部。我的问题是，我正在尝试设置链接，以便它们将水平填充，然后当没有更多空间时，它们将填充到下方，在DIV中生成一个新行。当这种情况发生时，它们将转到一个新行，但它稍微位于上面的行的顶部，而不是对齐。如果有人能告诉我如何使这更具组织性，我将不胜感激，我甚至愿意接受另一种放置它们的方式，即让链接填满一列，然后当它到达div的底部时，开始一个新的列并从上到下填充，等等。到目前为止，我已经尝试过使用URL和不使用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>

到目前为止，jQuery还可以工作，所以我不包括该代码，它基本上只是一个onclick（）代码，用于运行id=“hiddenbar”的切换

请注意：

这是在一个.cfm文件中运行的（我主要使用coldfusion，以防这会影响任何判断调用，但这是我在工作中必须使用的）。我提到这一点是为了防止任何东西发生冲突，但到目前为止，许多其他jquery功能都工作得很好，所以我怀疑它是否是cfm文件是一个问题

我有所有这些不同的样式表，因为我只是在修补，有时没有UL/li标签，有时有UL/li标签，所以可能会有一些样式表，比如UL、li和a标签

---

我的问题是，尽管有很多关于jquery导航条的TUT，但没有人真正解释如何将所有按钮分开，以及在它们相互重叠的情况下该怎么做，或者没有人用概念/英语术语解释功能是如何工作的。提前谢谢

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

我为您简化了一点代码，但如果您愿意，可以稍后更改

首先，您有两个ID为

隐藏条的元素。因此，当样式表呈现页面时，它实际上是将相同的
#隐藏条
样式分配给
div
及其下方的
ul

您可以做的只是从
ul
中删除ID，并在以后将其作为
div
的子项引用

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

其子
ul
将通过以下方式设置样式：

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

#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
元素在默认情况下是
内联的
而不是块，因此我指定希望
li
是块，以便可以浮动它们

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

菜单的总宽度应该接近您想要的菜单项数量的倍数，这样它才会看起来很好。如果我想要5个菜单项：

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

如果将div设置为649px，则会得到以下结果：


希望这有助于为您澄清问题并帮助您解决问题。
这个问题可能会有所帮助-谢谢！我会尝试一下，至少在这一部分，他设置了UL CSS来设置特定的列数，但我也希望有一种更简单的方法来控制DIV本身，因为所有链接都是不同大小的按钮。当问未来的问题时，请使用JSFiddle.net或JSBin.com。当与某人合作帮助他们解决此类问题时，这些工具被证明是非常宝贵的。如果我们能看到你的问题而不是阅读它，你的问题会更容易理解。（因此是JSFIDLE）注意到Mark，抱歉，正如我所说的，这对所有这些都是新的，该站点包括：）这确实有很大帮助，感谢您的解释。我也没有意识到某些东西默认有边距和焊盘，某些东西默认有块，但我想我从来没有真正注意到，如果我真的偶然发现了这一点。我只访问了这个网站，w3schools和google上的一些教程来了解大致情况，但这帮了大忙，再次感谢。
#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;
}