Question

我创建了一个有序列表的导航栏，我想将这些列表项放置在导航栏的顶部，我尝试了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>

Answer 1

您只需要向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>

Answer 2

您需要删除margin中的ol。只需添加此css

.menu ol {
  margin-top: 0;
  margin-bottom: 0;
}

Answer 3

将margin: 0;添加到<ol>标记

 #widgets:hover #widgetssub{
  display: block;
}
#widgetssub{
  display: none;
}

#kabobs:hover #kabobssub{
  display: block;
}
#kabobssub{
  display: none;
}
ol{
  list-style-type: none;
  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;
}

  <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>

Answer 4

我刚刚为我的网站导航栏解决了同样的问题。

当元素位于低点时，使用margin-top=0，padding-top=0可以让你将元素移动到它自己容器的顶部。但在很多情况下，比如我的情况，这个提示没有帮助，因为默认情况下它已经从低位开始对齐。

要将元素在其父容器中向上推，必须使用 margin-top= -40px;对于我的导航栏

下面的代码是我强制其边距顶部和填充顶部为零时的 ul（Bootstrap 4 语法 mt-0，pt-0；或等效的 CSS 语法 style="margin-top: 0px; padding-top:0px" ).

但是这种方式并没有将 ul 从其默认对齐方式向上移动，即在导航栏的中间高度。我想让 ul 与黄色徽标块的顶部边缘具有相同的高度

<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top"> 
        <div class="container"> 
            <div class="mb-2 mr-sm-2"><a class="navbar-brand mr-auto" href="#"><div style="background-color: yellow;width: 60px; height: 60px;"> </div></a></div> <!--highlight brand/logo, auto style/size logo image -->
            <div class="mb-2 mr-sm-2 collapse navbar-collapse" id="collapsibleNavbar"> 
                <ul class="navbar-nav mr-auto mt-0 pt-0" style="margin-top: 0px; padding-top:0px">
                    <li class="nav-item active"> <a class="nav-link" href="#"> <h5>Home</h5></a></li>
                </ul>       
            </div> <!-- END collapsable items-->                                   
        </div>  
    </nav> <!-- END navbar-->

下面的代码是将 margin-top=-40px 应用于 ul 时。现在 ul 与黄色标志块的顶部边缘处于同一高度

<nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top"> 
        <div class="container"> 
            <div class="mb-2 mr-sm-2"><a class="navbar-brand mr-auto" href="#"><div style="background-color: yellow;width: 60px; height: 60px;"> </div></a></div> <!--highlight brand/logo, auto style/size logo image -->
            <div class="mb-2 mr-sm-2 collapse navbar-collapse" id="collapsibleNavbar"> 
                <ul class="navbar-nav mr-auto" style="margin-top: -40px">
                    <li class="nav-item active"> <a class="nav-link" href="#"> <h5>Home</h5></a></li>
                </ul>       
            </div> <!-- END collapsable items-->                                   
        </div>  
    </nav> <!-- END navbar-->

如何将导航栏项目与顶部对齐？

4 个答案: