Question

我试图将我的h2对齐到标题的右侧，同时保持与现在相同的垂直方向，但是向右浮动似乎不起作用。有什么想法吗？

<div class="header-bg">

<h1>
Heading
</h1>
<h2>
this is where you write more things
</h2>
</div>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact Me</a></li>
  <li><a href="#about">About</a></li>
</ul>

这是CSS：

body {
  margin: 0;
}

.header-bg {
  background: lightblue;
}
h1, h2 {
  display: inline-block;
  margin: 10px 10px;
  /* border: solid black 1px; */
}

}
h2 {
  /* border: solid black 1px; */
  float: right;
}


ul {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;  
  background: #333;
  overflow: hidden;
}

以下是jsfiddle的链接：https://jsfiddle.net/n8xjk4ax/3/

Answer 1

首先，删除无关的}，就像评论所说的那样。

现在h2浮动，它将不再与h1位于同一基线上。如果你确实想要它们，有几种可能性。

不要漂浮它，但要对齐容器中的项目

body {
  margin: 0;
}

.header-bg {
  background: lightblue;
  padding: 10px;
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}

h1, h2 {
  display: inline-block;
  margin: 0;
  /* border: solid black 1px; */
}

ul {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  overflow: hidden;
}

li a {
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
}

li {
  float: left;
}

li:last-child {
  float: right;
}

li a:hover {
  background-color: #111;
  color: white;
}

<div class="header-bg">
  <h1>
    Heading
  </h1>
  <h2>
    this is where you write more things
  </h2>
</div>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact Me</a></li>
  <li><a href="#about">About</a></li>
</ul>

或者如果你想要浮动，容器还需要overflow:hidden来考虑窄屏幕。你应该给h1和h2指定相同的指标。使用行高是最直接的。

body {
  margin: 0;
}

.header-bg {
  background: lightblue;
  overflow:hidden;
}

h1, h2 {
  display: inline-block;
  margin: 0 10px;
  line-height: 4rem;
  /* border: solid black 1px; */
}

h2 {
  /* border: solid black 1px; */
  float: right;
}

ul {
  clear: both;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  overflow: hidden;
}

li a {
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 14px 16px;
}

li {
  float: left;
}

li:last-child {
  float: right;
}

li a:hover {
  background-color: #111;
  color: white;
}

<div class="header-bg">
  <h1>
    Heading
  </h1>
  <h2>
    this is where you write more things
  </h2>
</div>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact Me</a></li>
  <li><a href="#about">About</a></li>
</ul>

将h2内联到h1并在航向中向右浮动

1 个答案: