Question

我正在学习HTML，并编写了以下内容来尝试创建侧面导航菜单：

<html>
    
    <head>
       <style>
          * {
             border: 2px solid red;
          }
    
          #mainBody {
    
          }
    
          #mainNav {
             display: inline-block;
             width: 20%;
          }
    
          .navMenu {
             list-style-type: none;
          }
    
          #mainContentBody {
             display: inline-block;
             width: 75%
          }
    
       </style>
    </head>
    
    <body>
    
        <header>
           <p>This is a header!</p>
        </header>
    
        <section id="mainBody">
    
           <nav id="mainNav">
              <ul class="navMenu">
                 <li> <a href="pascal-cropped.jpg">Pascal Cropped</a> </li>
                 <li> <a href="a.png">Ethics Excerpt</a> </li>
                 <li> <a href="pascal-cropped.jpg">Pascal Cropped Again</a> </li>
              </ul>
           </nav>
    
           <section id="mainContentBody">
              <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl mollis, sodales neque id, efficitur velit. Aliquam et ultricies purus. Nulla facilisi. Mauris id pulvinar ipsum, ac commodo ipsum. Nunc non facilisis augue. Suspendisse nec lacus ullamcorper, ultricies augue nec, consectetur enim. Donec fermentum suscipit dapibus. Nunc quis interdum nibh, vel aliquam nunc. Nunc non tincidunt sem. Nullam vitae dapibus metus. Curabitur eget dignissim lectus. Vivamus tempus sagittis eros sit amet aliquet. Integer tincidunt porta leo ac suscipit.
    
                 Quisque a feugiat erat. Proin non ante ut leo aliquam aliquam. Etiam tempus volutpat nulla sed commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est et rutrum dapibus. Cras luctus id ex vel volutpat. Suspendisse porttitor, mauris vitae dapibus convallis, felis eros maximus ex, vitae sodales ante nulla eu quam. Curabitur nec metus nisi. Nunc dapibus orci condimentum lobortis dictum. Proin augue orci, pharetra a mollis vel, ornare id tellus. Pellentesque lectus leo, maximus et risus id, gravida ornare diam. Etiam eget metus quis quam feugiat mattis. Praesent vitae elementum metus.
    
                 Fusce volutpat fringilla ex, sit amet imperdiet sapien efficitur a.
              </p>
              <p>
                 Proin gravida orci diam, vitae placerat ligula hendrerit vel. Donec turpis nulla, lacinia vel justo in, consequat elementum tellus. Vivamus ut gravida metus. Aliquam lobortis, dolor nec pulvinar venenatis, lorem enim viverra sapien, vitae ultricies velit nisl vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a tincidunt lorem, non mollis neque. Nullam interdum dolor luctus ornare gravida. In tempus diam lectus. Sed tempor, purus in convallis suscipit, nisi nibh vehicula augue, et iaculis nisl nisl vestibulum justo. Integer posuere cursus velit, et iaculis justo aliquet et. Sed dapibus egestas neque, tincidunt aliquam nisl dapibus at. Morbi malesuada pellentesque posuere. Fusce a libero at mauris maximus maximus eu sed mi. Vivamus est nulla, viverra non felis at, elementum condimentum lacus. Sed sodales enim non tortor faucibus imperdiet.
    
                 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus est diam, mollis non purus non, posuere porta est. Donec vestibulum consequat massa vitae dictum. Sed eu lectus sed leo dignissim rutrum. Donec efficitur imperdiet purus, quis iaculis risus accumsan a. Integer ac erat id odio fringilla elementum. Pellentesque egestas ex eleifend, mollis nunc a, feugiat dui. Duis interdum id arcu vel aliquam. Aenean fringilla quam dolor, ut tempor elit cursus ut. Sed congue dui sit amet risus egestas rutrum. Nam dictum porttitor turpis, sit amet suscipit nunc consectetur ut. Donec at tincidunt nibh. Vestibulum sagittis pharetra eleifend.
    
                 Aenean pharetra, mi ac mattis suscipit, eros ante vehicula tellus, egestas ultricies felis elit sed ex. Suspendisse in nisl elit. Nullam nec libero nisl. Nulla tincidunt purus sapien, sed pulvinar diam varius non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero sed lorem dignissim hendrerit. Proin felis tortor, dignissim ac maximus ornare, consectetur vitae velit. Aenean nec accumsan felis. Proin vitae fringilla magna. Pellentesque sagittis purus sed finibus pretium. Nam nec ante dapibus odio suscipit mattis. Nulla in nisi convallis, pulvinar leo ac, fringilla nisl. Nam a dictum dolor.
    
              </p>
           </section>
        </section>
    </body>
    
    </html>

出于某种原因，侧边菜单位于#mainBody的底部，而不是靠近顶部：

注意左侧菜单上方的所有空白区域。我尝试使用top CSS属性调整其位置，但它没有改变任何内容。

有人能指出我正确的方向吗？

Answer 1

添加

vertical-align:top;

到您的css *{}

jsFiddle

Answer 2

将vertical-align添加到#mainNav，如下所示：

#mainNav {
     vertical-align: top;
     display: inline-block;
     width: 20%;
  }

导航菜单显示在其父级的底部

2 个答案: