Question

enter image description here，当我的屏幕达到768px时，我试图将我的名字和导航链接放在同一行，但是在将它们的显示设置为内嵌块后，它却无法对齐。任何人都可以帮忙，谢谢。这是我的资料库。 https://github.com/corry010/mobile-first-reponsive-project

仅使用行内显示作为尝试。但是它也不能与代码一起工作，但无法弄清楚。

.container {
  width: 80%;
  margin: 0 auto;
  /* max-width: 1000px; will change it later */
}

.name {
  float: left;
}

.main-nav {
  float: right;
}

.main-nav li {
  float: left;
}

.name,
.main-nav,
.navigation,
.main-nav li {
  display: inline-block;
}

<header class="main-header">
  <div class="container clearfix">
    <h1 id="top-page" class="name links"><a href="#top-page">Cornelis Etta</a></h1>

    <nav class="navigation">
      <ul class="main-nav links">
        <li><a href="#top-page">home</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#interest">interest</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>

  </div>
</header>

我的名字和导航应该在768屏幕的同一行上。

Answer 1

您可以使用flex layout使项目并排对齐，而添加align-items: center;可以使Flexbox中的项目居中。

与网站集成时，请添加媒体查询。

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.name {
  flex-grow: 1;
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

.main-nav li {
  display: inline-block;
}

<header class="main-header">
  <div class="container clearfix">
    <h1 id="top-page" class="name links"><a href="#top-page">Cornelis Etta</a></h1>

    <nav class="navigation">
      <ul class="main-nav links">
        <li><a href="#top-page">home</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#interest">interest</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </nav>

  </div>
</header>

我的标题和导航不会排在同一行

1 个答案: