Question

我对CSS有点新意，所以请原谅我这方面的任何缺点。

我正在网站上工作并制作了一个导航栏，其中我有几个div 一些div包含一个列表，当我将它们悬停时它会下降。问题在于，这会使div本身的宽度增加，并使其周围的其他div移动我观察到它增加的宽度是列表中最长元素的宽度我不知道是什么造成了它，并试图玩这个位置，但似乎没有任何作用我想停止移动上面的div，这样它看起来并不奇怪。

HTML：

<body>
<div  class="header" id="banner"></div>
<div class="header" id="navbar">
    <div class="nb_item">HOME</div>
    <div class="nb_item">ABOUT US
        <ul id="abtus_menu">
            <li>LA MARTINIERE COLLEGE, LUCKNOW</li>
            <li>LA MARTINIERE MODEL UNITED NATIONS</li>
            <li>SECRETARIAT</li>
        </ul>
       </div>
    <div class="nb_item">REGISTER
        <ul id="rgstr_menu">
            <li>INDIVIDUAL</li>
            <li>DELEGATION</li> 
        </ul>
    </div>
    <div class="nb_item">COMMITTEES
        <ul id="comt_menu">
            <li>COMMITTEE 1</li>
            <li>COMMITTEE 2</li>
            <li>COMMITTEE 3</li>
            <li>COMMITTEE 4</li>
            <li>COMMITTEE 5</li>
            <li>COMMITTEE 6</li>
        </ul>
    </div>
    <div class="nb_item">RESOURCES</div>
    <div class="nb_item">EVENTS
        <ul id="evnt_menu">
            <li>KEYNOTE SPEAKERS</li>
            <li>SOCIALS</li>
        </ul>
    </div>
    <div class="nb_item">SPONSORS</div>
    <div class="nb_item">CONTACT US</div>

CSS：

.html
{
    background-color: #FFFFFF;
}

body
{
    margin: 0;
    padding:0;
}

.header
{
    width: 80%;
    margin:auto;
    padding:0;
    display:flex;   
}

#banner
{
    height: 200px;
    width: 80%;
    background-color: #EEEEEE;
}

#navbar
{

    background-color: #70A5DA;
    height: 28px;   
}

.menu
{
    list-style-type:none;
}

.nb_item
{
    display:inline-block;
    width:auto;
    padding:0px 10px;
    color:#FFFFFF;
    margin:auto;
    text-align:center;
    line-height:28px;
}

.nb_item:hover
{
    color: #DDDDDD;
    cursor:pointer;
}

#abtus_menu li
{
    list-style-type:none;
    display:none;

}
.nb_item:hover #abtus_menu li
{
    display:block;
    color: #DDDDDD;
}

#comt_menu li
{
    list-style-type:none;
    display:none;
}

.nb_item:hover #comt_menu li
{
    display:block;
}



#rgstr_menu li
{
    list-style-type:none;
    display:none;
}

.nb_item:hover #rgstr_menu li
{
    display:block;
}

#evnt_menu li
{
    list-style-type:none;
    display:none;
}

.nb_item:hover #evnt_menu li
{
    display:block;
}


.menu li
{
    display:inline;
}

这是我的JSFiddle：JSFiddle（如果查看有问题，请缩小到50％）

Answer 1

    .nb_item {
        position: relative;
        display:inline-block;
        width:auto;
        padding:0px 10px;
        color:#FFFFFF;
        margin:auto;
        text-align:center;
        line-height:28px;
    }
    ul {
        padding-left: 0;
        position: fixed;
    }
    .nb_item ul li {
        text-align: left;
    }

将ul的位置从绝对更改为固定，然后您无需为任何元素指定任何宽度。

Answer 2

这是因为DIV是文档流程的一部分，因此当它们被显示时，所有内容都会被推出。你需要做的是像这样使用绝对位置：

.nb_item {position: relative}
/* This allows it's child absolute elements to adhere to their parents position (.nb_item) */

然后：

.nb_item ul {position: absolute; top: 100%; left: 0}
/* This absolutely positions the child (drop down menu) element so it's taken out of the document flow, hence not affecting positions of other elements */

希望这有帮助！

修改绝对定位的元素应该定义宽度，否则它们将采用最宽的非破坏单词的宽度。试试这个：

.nb_item ul {width: 200px; border: 1px solid #000} .nb_item ul li {text-align: left} .nb_item ul li a {padding: 10px}

当列表显示为导航栏中的下拉列表时，其他div移动

2 个答案: