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

Posted 2023-05-08

【中文标题】在 DIV 中，链接在溢出到新行后重叠

【英文标题】：Within DIV, Links Are Overlapping After Overflow To A New Line

【发布时间】：2011-11-27 23:20:31

【问题描述】：

我仍在尝试使用 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 工作正常，所以我不会包含该代码，它基本上只是一个 onclick() 编码来运行 id="hidden-bar" 的切换。

几点说明：

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

我有所有这些不同的样式表，因为我只是在修补时有时没有 UL/LI 标签，有时还有，所以这就是为什么其中可能有一些，比如一个用于 UL，一个用于 LI，一个用于“a”标签。

我的问题是，尽管这些 jquery 导航栏有很多 tuts，但没有人真正解释如何使所有按钮分开以及如果它们相互重叠该怎么办，或者不解释该功能如何以概念/英语术语工作。提前致谢。

【问题讨论】：

这个 SO 问题可能会有所帮助 - ***.com/questions/4923/wrapping-lists-into-columns

谢谢！我会尝试一下，至少是那个人设置 UL CSS 以设置特定列数的部分，但我也希望有一种更简单的方法来控制 DIV 本身，因为所有链接的大小都不同按钮。

以后有问题时，请使用 JSFiddle.net 或 JSBin.com。这些工具在与某人合作以帮助他们解决此类问题时证明是无价的。如果我们能看到它而不是阅读它，您的问题会更容易理解。 （因此 JSFiddle）

注意到马克，对不起，正如我所说，对所有这些都相当新，包括该网站:)

【参考方案1】：

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

我为您简化了一些代码，但您可以稍后根据需要更改它。

首先，您有 2 个 ID 为 hidden-bar 的元素。因此，当您的样式表呈现页面时，它实际上为您的div 和它下面的ul 分配了相同的#hidden-bar 样式。

您可以做的只是从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 被阻塞，这样我就可以浮动它们。

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

菜单的总宽度应接近您希望在其上显示的菜单项数量的倍数，以使其看起来不错。如果我想要 5 个菜单项：

5 * (120px 宽度 + 5px 左边距 + 5px 右边距) = 5 * 130 像素 = 650px 总宽度

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

希望这有助于为您理清思路并帮助您解决问题。

【讨论】：

这确实有很大帮助，感谢您解释这一点。我也没有意识到某些东西默认有边距和填充，而某些东西默认是阻塞的，但我想我从来没有真正注意到我是否偶然发现了这一点。我只真正访问过这个网站和 w3schools 和 google 以获得一些教程来了解总体思路，但这很有帮助，再次感谢。