时间戳

首页 > 解决方案 > 如何将导航栏项目对齐到顶部？

css - 如何将导航栏项目对齐到顶部？

问题描述

我创建了一个带有有序列表的导航栏，我想将这些列表项放置在导航栏的顶部，我尝试过margin-top: 0，但没有奏效。

有人可以帮忙吗？

#widgets:hover #widgetssub {
  display: block;
}

#widgetssub {
  display: none;
}

#kabobs:hover #kabobssub {
  display: block;
}

#kabobssub {
  display: none;
}

ol {
  list-style-type: none;
}

.menu-item {
  display: inline-block;
  margin-left: 30px;
  border: 1px solid black;
  height: 40px;
  ;
  width: 100px;
  float: left;
  vertical-align: top;
  margin-top: 0px
}

.menu {
  display: flex;
  height: 40px;
  border: 1px solid black;
  justify-content: center;
}

body {
  margin: 0;
}
<body>
  <nav class="menu">
    <ol>
      <li class="menu-item"><a href="#0">Home</a></li>
      <li class="menu-item"><a href="#0">About</a></li>
      <li class="menu-item" id="widgets">
        <a href="#0">Widgets</a>
        <ol class="sub-menu" id="widgetssub">
          <li class="sub-item"><a href="#0">Big Widgets</a></li>
          <li class="sub-item"><a href="#0">Bigger Widgets</a></li>
          <li class="sub-item"><a href="#0">Huge Widgets</a></li>
        </ol>
      </li>
      <li class="menu-item" id="kabobs">
        <a href="#0">Kabobs</a>
        <ol class="sub-menu" id="kabobssub">
          <li class="sub-item"><a href="#0">Shishkabobs</a></li>
          <li class="sub-item"><a href="#0">BBQ kabobs</a></li>
          <li class="sub-item"><a href="#0">Summer kabobs</a></li>
        </ol>
      </li>
      <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
  </nav>
</body>

标签： css

解决方案

您只需要添加margin: 0并且可能padding: 0（取决于您需要什么）到ol元素：

#widgets:hover #widgetssub{
  display: block;
}
#widgetssub{
  display: none;
}

#kabobs:hover #kabobssub{
  display: block;
}
#kabobssub{
  display: none;
}
ol{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu-item{
  display: inline-block;
  margin-left: 30px;
  border: 1px solid black;
  height: 40px;;
  width: 100px;
  float: left;
  vertical-align: top;
  margin-top: 0px

}
.menu{
  display: flex;
  height: 40px;
  border: 1px solid black;
  justify-content: center;
}
body{
  margin: 0;
}
    <nav class="menu">
    <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item" id="widgets">
      <a href="#0">Widgets</a>
      <ol class="sub-menu" id="widgetssub">
        <li class="sub-item"><a href="#0">Big Widgets</a></li>
        <li class="sub-item"><a href="#0">Bigger Widgets</a></li>
        <li class="sub-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item" id="kabobs">
      <a href="#0">Kabobs</a>
      <ol class="sub-menu" id="kabobssub">
        <li class="sub-item"><a href="#0">Shishkabobs</a></li>
        <li class="sub-item"><a href="#0">BBQ kabobs</a></li>
        <li class="sub-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
    </ol>
    </nav>

推荐阅读