Question

我仍然试图用CSS等来获取整个jQuery概念。我正在尝试制作一个简单的导航栏，其中有一个隐藏的DIV。我会从看起来像一个开始按钮开始，当点击它时会设置一个toggle（）来显示或隐藏它上面隐藏的DIV，在这种情况下，会使菜单栏显示在页面顶部。我的问题是我试图设置链接以便它们会在地平线上填满，然后当没有更多空间时，它们将在DIV内部填满新行。当发生这种情况时，它们会进入一个新的行，但它略微位于它上面的行的顶部，而不是排成一行。如果有人可以告诉我如何让这个更有条理我会很感激，我甚至愿意接受另一种方式来放置它们，即让链接填满一列然后当它到达底部时div，开始一个新的colum并从上到下填充等等。到目前为止，我尝试过使用和不使用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到目前为止工作所以我不会包含那些代码，它基本上只是一个onclick（）编码来运行id =“hidden-bar”的切换。

一些注意事项：

这是在一个.cfm文件中运行的（我主要使用coldfusion，这会影响任何判断调用，但这就是我必须用于我的工作）。我提到这个问题，任何事情都会发生冲突，但到目前为止，很多其他的jquery功能都运行得很好，所以我怀疑它是一个cfm文件是一个问题。
我有所有那些不同的样式表，因为我有时候没有UL / LI标签而且有时候只是修补，所以这就是为什么那里可能有一些，比如一个用于UL，一个用于LI，和一个“a”标签。

我的问题是，虽然这些jquery导航栏有很多内容，但是没有人真正解释如何使所有按钮分开以及如何使它们彼此重叠，或者不解释功能如何在概念/英语术语中工作。提前致谢。

Answer 1

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

enter image description here

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

首先，您有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 *（120px宽度+ 5px左边距+ 5px右边距） = 5 * 130px = 650px总宽度

如果你将div设置为649px，你会得到这个：

enter image description here

希望这有助于为您解决问题并帮助您解决问题。

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

1 个答案: