【问题标题】: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 属性声明具有更高的优先级。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-05-22
    • 2020-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多