为什么 Margin Top 对我的导航栏不起作用

Question

所以我正在尝试重新创建一个网站，并且我正在尝试使导航栏水平和垂直居中，我不知道该怎么做，所以我一直在改变顶部边距：（x 像素数量）；但对于我的导航栏的中间部分，它没有改变，我不知道如何修复它。

无论我设置 .nav-bar margin-top 还是中间文本都没有改变？任何建议我对编码很陌生所以如果可能的话越简单越好 首先是 Html 然后是 Css

  <nav> 
      <ul >
        <li  >
             
        </li>
        <li  >
          <a  class="nav-bar-header" href="#">Medicare</a>
        </li>
        <li  >
          <a  class="nav-bar"  href="#">Individuals & Families</a>
        </li>
        <li >
            <a  class="nav-bar" href="#"> Businesses </a>
        <li >
          <a  class="nav-bar"  href="#"> Brokers </a>
        <li >
          <a  class="nav-bar" href="#">Providers  </a>
        <li >
            <a class="nav-bar-exit"  href="#">Shop Plans</a>
          <ul >
        </nav>



nav {
    overflow: hidden;
    background-color: rgb(22, 123, 156);
    text-align: center;
    width: 100%;
   
    height: 4.5em;
    
       
}

.nav-bar-header {
    text-decoration: none;
    color: #e7c9c9;
    float: left;
    font-size: 25px;
    
    
    padding-left: 30px;
    
    
}
.nav-bar {
  color: #e7c9c9;
  text-decoration: none;
  font-size: 17px;
  padding: 3em;
  margin-top: 2em;
  font-size: 15px;
  
  
}
ul { 
    margin-top: 16px;

}

.nav-bar-exit  {
    float: right;
    margin-right: 30px;
    text-decoration: none;
    color: #e7c9c9;
    border: 2px solid white;
    border-radius: 10px;
    padding: 4px;
  
    font-size: 25px;
}
 
li {
    display: inline;
    text-align: center;
    width: 100%;
    padding-right: 30px;
     
}

Answer 1

margin-top

永远不会起作用，因为

nav-bar

本质上是

inline

，只是没有任何空间可以生长和占据。你也给了

display: inline

li

，这将使给定的

width

或

height

无效。 将显示更改为

inline-block

并将

height

和

width

给

li

和

.nav-bar

.

此外，您已经为

a

中的

li

提供了样式类，但是为了对齐，您需要为

li

提供样式。元素只能根据空间在容器内移动。这里的主要容器是

ul

，因此您必须将样式应用于

li

并在容器中相应地移动它们。

我可以在开头看到一个多余的空

li

，您需要将其删除，我相信如果您的样式正常工作，您将不需要它，并在末尾关闭

ul

，否则它将附加另一个元素在dom.

研究一下

display: flex

，代码会更少，布局也更容易管理。