时间戳

首页 > 解决方案 > h1 与导航栏不对齐

html - h1 与导航栏不对齐

问题描述

HTML/CSS 新手，我正在尝试将 h1 与导航栏对齐，但它不起作用。我希望标题和两个导航链接位于同一行。

.navigation {
  width: 100%;
  height: 80px;
  background: #2eb82e;
  display: inline-block;
}

.main-nav {
  display: inline-block;
  vertical-align: top;
  height: 0px;
  line-height: 0px;
  margin-left: 1000px;
}

h1 {
  font-size: 30px;
  color: whitesmoke;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 50px;
  margin-left: 20px;
  margin-top: 20px;
}
<section class="navigation">
  <nav>
    <header>
      <h1>Heading</h1>
    </header>
    <ul>
      <li class="main-nav"><a class="link" href="">Nav 1</a></li>
      <li class="main-nav"><a class="link" href="">Nav 2</a></li>
    </ul>
  </nav>
</section>

将不胜感激任何帮助。谢谢！

标签： htmlcss

解决方案

您需要删除并将ul 设置为margin-left: 1000px;0.main-navpadding-left

.navigation {
  width: 100%;
  height: 80px;
  background: #2eb82e;
  display: inline-block;
}

.main-nav {
  display: inline-block;
  vertical-align: top;
  height: 0px;       
  line-height: 0px;
  
}

h1 {
  font-size: 30px;
  color: whitesmoke;
  display: inline-block;
  vertical-align: top;
  width: 400px;
  height: 50px;
  margin-left: 20px;
  margin-top: 20px;
}

ul{
padding-left:0;
}
<body>
    <section class="navigation">
    <nav>
        <header><h1>Heading</h1></header>
            <ul>
                <li class="main-nav"><a class="link" href="">Nav 1</a></li>
                <li class="main-nav"><a class="link" href="">Nav 2</a></li>
            </ul>
    </nav>
    </section>

推荐阅读