导航元素未对齐答案

【问题标题】：Navigation Elements not lining up导航元素未对齐
【发布时间】：2020-12-20 06:23:33
【问题描述】：

我正在将 bulma 用于 css 框架，我遇到了一个有趣的学习经历。我正在尝试将导航按钮与红色字段的底部对齐。但是，正如您所看到的，它们已经偏离对齐。我尝试对它们应用内联 css 样式，但这并不能解决问题。

谁能给我指出正确的目录，不胜感激。

https://codepen.io/robot43298/pen/WNGENNL

.navbar-end {
.button{
color: white;
font-size: 18px;
border: 2px dashed white;
background-color: red;
}
.dropdown-trigger{
margin-top: 15%;
display: inline;
vertical-align: bottom;
}
& li{
font-size: 16px;
}
}

【问题讨论】：

标签： html css sass bulma

【解决方案1】：

试试这个，

删除这个边距

.navbar-end .dropdown-trigger {
       margin-top: 15%; /* Remove this margin */
       display: inline;
       vertical-align: bottom;
  }

并根据需要在此处添加一些填充

.dropdown{
     padding-top: 20px;
   }

这应该可以解决问题；

【讨论】：

谢谢。我试过这个，它使导航栏本身移动得比我想要的要低得多。
在添加 padding 之前是否先删除了 margin-top ？

【解决方案2】：

我尝试在控制台中查看您的代码，我添加了一行并删除了一行。它似乎按照您的期望工作。如果这是您想要的，请告诉我。

【讨论】：

感谢您的帮助。只是出于好奇，为什么是“！重要”。我有时也看到过，但从未真正理解过。
margin-top 已由 bluma 提供，以覆盖我使用的规则！important。根据 CSS 特定性规则，!important 标志比同一元素的其他 css 属性声明具有更高的优先级。