html - 如何将图像与 HTML/CSS 中的 h1 元素放在同一行？

Question

我完全无法尝试让左 V 形和右 V 形显示在 h1 标记中日期的两侧。我希望用户有一天能够单击任一人字形来向前或向后移动。然而，无论 div 或 img 类和 position, float, display 的组合如何，它仍然看起来像附加的屏幕截图，即使我'已确保文档正在更新。

如何修改 HTML/CSS，使人字形与日期位于同一行？

<div class= "dater">
  <div class="chevron-left">
     <img src="glyphicons-225-chevron-left.png"/>
  </div>  
  <h2><%= @todie %></h2>
  <div class="chevron-right">
     <img src="glyphicons-224-chevron-right.png"/>
  </div>
</div>

---

编辑:我的解决方案基于 Rob 的回答。

.chevron-right img {
  float: right;

}

.chevron-left img {
 float: left;

}

.dater {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 60px;
  margin-bottom: 40px;
}

.dater h2 {
  text-align: center;
  font-weight: 400;
  float: left;
}

Answer 1

您的问题的原因是您的图像包含在 block 级元素中，这些元素占据了浏览器视口(viewport)的整个宽度。即使那样，它也不会完全按照您的意愿工作，但有很多方法可以实现。

首先，您可以将图像放入 <h2> 中在文本的左侧和右侧。这是最简单的方法。

其次，您可以使用 CSS 伪类 ::before和 ::after

您还可以设置 <h2> 的宽度并 float 所有内容，包括图像，但必须设置为 inline帮助实现这一目标。

方法不止这些。