即使ul子显示设置为none，div文本也会略微向上移动

I'm a bit new to CSS so forgive me for any shortcomings on my side but I can't seem to find the solution for this problem anywhere else. I'm sure it is very trivial as I haven't changed too much to the code before it went wrong.

我对CSS有点新意，请原谅我身上的任何缺点，但我似乎无法在其他任何地方找到解决这个问题的方法。我确定这是非常微不足道的，因为我在代码出错之前没有对代码进行太多改动。

So I have made this website's navbar which has 8 different div on it and they are equally spaced with each other. I want to have a drop down when mouse hovers on some of them. Anyway, before I created a list(or comment it) as a child of this div the ABOUT US seems to be in position as I meant it to be. Vertically centered and aligned with other div 's content.

所以我制作了这个网站的导航栏，其上有8个不同的div，它们彼此间隔相等。当鼠标悬停在其中一些鼠标上时，我希望有一个下拉菜单。无论如何，在我创建一个列表（或评论它）作为这个div的孩子之前，ABOUT US似乎就像我的意思一样。垂直居中并与其他div的内容对齐。

Here's my website look before adding the list child to the div: 即使ul子显示设置为none，div文本也会略微向上移动 Here's after it:

这是我的网站看起来之前将列表子项添加到div：这是在它之后：

As you can see, the ABOUT US has moved above a little.

正如您所看到的，ABOUT US已经超过了一点。

Here's my JSFiddle: JSFiddle

这是我的JSFiddle：JSFiddle

(I advise you to view the JSFiddle page at a 50% Zoom level to get a perspective of every div.)

（我建议你以50％的缩放级别查看JSFiddle页面，以获得每个div的透视图。）

Please provide a solution as to how I can prevent this from happening and also, if you'd like to help me additionally then tell me how to get a drop down on hover.

请提供一个解决方案，以便我如何防止这种情况发生，如果您想再帮助我，请告诉我如何在悬停时下拉。

3 个解决方案

#1

Add line-height: 28px to match the height of #navbar and the text will be aligned.

添加行高：28px以匹配#navbar的高度，文本将对齐。

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

JSfiddle

的jsfiddle

#2

The problem is that you're putting the list in the div, so it's going to push the top part up of course since it's trying to vertically center.

问题是你将列表放在div中，所以当它试图垂直居中时，它会推动顶部。

One quick fix would be to add padding to the top of .nb_item to have it properly line up.

一个快速解决方法是在.nb_item的顶部添加填充以使其正确排列。

.nb_item {
    display:inline-block;
    width:auto;
    padding:6px 10px 0px 10px; /* added 6px padding to top */
    color:#FFFFFF;
    margin:auto;
    text-align:center;
}

Alternatively you could put your drop-down and drop-down header in different divs, but contained within the same one so you can still activate the drop-down on hover.

或者，您可以将下拉和下拉标题放在不同的div中，但包含在同一个div中，这样您仍然可以在悬停时激活下拉列表。

#3

Just change (display: inline-block;) in side (.nb_item) to either (display: inline-flex;) or (display: flex;) also change (padding:0; to padding:3px;) inside .header and you can add cursor: pointer; inside .nb_item:hover to make pointer hand on hover.

只需将（.nb_item）中的（display：inline-block;）更改为（display：inline-flex;）或（display：flex;）也在.header内更改（padding：0;填充：3px;）你可以添加游标：指针;在.nb_item内：悬停以使指针指针悬停。

HTML Code:

HTML代码：

.html
{
  background-color: #FFFFFF;
}

body
{
  margin: 0;
  padding:0;
}

.header
{
  width: 80%;
  margin:auto;
  padding:3px;
  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-flex;
    display: -webkit-inline-box;
    width:auto;
    padding:0px 10px;
    color:#FFFFFF;
    margin:auto;
    justify-content: center;
  vertical-align: central;
}

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

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

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

}

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

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

CSS Code:

CSS代码：

<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>
</div>

If you have any qestion let me know

如果您有任何问题，请告诉我

#1