在导航栏中对齐项目答案

【问题标题】：Align item in navbar在导航栏中对齐项目
【发布时间】：2022-02-15 20:10:40
【问题描述】：

我想对齐项目。

下拉菜单给我带来了问题，我该如何解决它。

最终目标是拥有一个像这个网站https://www.cafuil.it/这样的导航栏

我尝试删除带有类下拉列表的 div，并且项目已对齐

.menù{
    display: flex;
    width: 100%;
    margin-right: initial;
}
.menù a{
    text-decoration: none;
    font-size: 20px;
    padding: 30px;
    border-left: solid rgb(151, 142, 142) 1px;
    border-right: solid rgb(151, 142, 142) 1px;}
#aServizi{
  padding: initial;
}
  .dropdown {
    position: relative;
    display: inline-block;
  } 
  .dropdown-content a {
    color:  rgb(120, 179, 216);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
  }
.dropdown:hover .dropdown-content {display: block;}
 .dropdown-content {
      display: none;
      position: absolute;
      min-width: 170px;
      box-shadow: 0px 8px 16px 0px rgb(120, 179, 216);
      z-index: 1;
    }

<div class="menù">
               <div class="dropdown">
                <a id="aServizi" href="" class="dropbtn">SERVIZI</a>
                <div class="dropdown-content">
                    <a href="">as</a>
                    <a href="">ss</a> 
                </div>
               </div>
               <a href="">
                   <p>ORARI</p>
               </a>

【问题讨论】：

标签： html css

【解决方案1】：

要垂直对齐菜单中的项目，只需将 align-items: center; 添加到您的 .menù 规则中。

.menù {
  display: flex;
  width: 100%;
  margin-right: initial;
  align-items: center; /* add this */
}

.menù a {
  text-decoration: none;
  font-size: 20px;
  padding: 30px;
  border-left: solid rgb(151, 142, 142) 1px;
  border-right: solid rgb(151, 142, 142) 1px;
}

#aServizi {
  padding: initial;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content a {
  color: rgb(120, 179, 216);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgb(120, 179, 216);
  z-index: 1;
}

<div class="menù">
  <div class="dropdown">
    <a id="aServizi" href="" class="dropbtn">SERVIZI</a>
    <div class="dropdown-content">
      <a href="">as</a>
      <a href="">ss</a>
    </div>
  </div>
  <a href="">
    <p>ORARI</p>
  </a>

【讨论】：