Question

我是一个CSS初学者，我想为页眉提供一种布局，该页眉的左侧为徽标，右侧为一个登录按钮，但页眉和登录按钮应对齐。在此按钮下面是菜单。

它工作正常，但是我不明白如何使用flexbox而不是使用float右将登录按钮“ login”放在右边。

你知道如何实现吗？

* {
  padding: 0;
  margin: 0;
}

.header {
  background-color: orange;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

header {
  background-color: orange;
}

.nav {
  display: flex;
  justify-content: center;
}

.nav a {
  padding: 0px 10px 0px 10px;
}

<header>
  <div class="container">
    <div class="main">
      <h1>Logo</h1>
      <a>Login</a>
    </div>
    <div class="nav">
      <a href="">Link 1</a>
      <a href="">Link 2</a>
      <a href="">Link 3</a>
      <a href="">Link 4</a>
    </div>
  </div>
</header>

Answer 1

只需将其添加到您的CSS

.main {
  display: flex;
}

.main > h1 {
  flex: 1;
}

您可以简化标记。见下文：（只是一个选择）

* {
  margin: 0;
  padding: 0; 
}

header{
  background-color: orange;
}

.container {
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 800px;
}

nav {
  flex: 1;
  text-align: center;
}

nav > a {
  padding: 0 10px;
}

<header>
  <div class="container">
    <h1>Logo</h1>
    <nav>
      <a href="">Link 1</a>
      <a href="">Link 2</a>
      <a href="">Link 3</a>
      <a href="">Link 4</a>
    </nav>
    <div>Login</div>
  </div>
</header>

DEMO

Answer 2

只需给class main这个CSS：
<svg style="height:16px; width:16px;" focusable="false" viewBox="0 0 32 32"><path d="M14,5.5c0,1.7-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S14,3.8,14,5.5z M21,8.5c1.7,0,3-1.3,3-3s-1.3-3-3-3s-3,1.3-3,3S19.3,8.5,21,8.5z M11,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,12.5,11,12.5z M21,12.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,12.5,21,12.5z M11,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S12.7,22.5,11,22.5z M21,22.5c-1.7,0-3,1.3-3,3s1.3,3,3,3s3-1.3,3-3S22.7,22.5,21,22.5z"></path></svg>

.main {
  display: flex;
  justify-content: space-between
}

* {
  padding: 0;
  margin: 0;
}

.header {
  background-color: orange;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

header {
  background-color: orange;
}

.nav {
  display: flex;
  justify-content: center;
}

.nav a {
  padding: 0px 10px 0px 10px;
}

.main {
  display: flex;
  justify-content: space-between
}

Answer 3

我在这里给出了代码

<header>
  <div class="container">
    <h1>Logo</h1>
    <nav>
      <a href="">Link 1</a>
      <a href="">Link 2</a>
      <a href="">Link 3</a>
      <a href="">Link 4</a>
    </nav>
    <div>Login</div>
  </div>
</header>

和CSS此处

.main {
  display: flex;
}

.main > h1 {
  flex: 1;
}
* {
  margin: 0;
  padding: 0; 
}

header{
  background-color: orange;
}

.container {
  display: flex;
  align-items: center;
  margin: 0 auto;
  max-width: 800px;
}

nav {
  flex: 1;
  text-align: center;
}

nav > a {
  padding: 0 10px;
}

http://jsfiddle.net/gyw381L5/7/

谢谢

如何将“登录”按钮对准右边？

3 个答案: