如何将图像定位在与HTML / CSS中的h1元素相同的行上？

Question

我完全陷入困境，试图在h1标签的日期两侧显示左V形和右V形。我希望用户能够点击任何一个雪佛龙来向前或向后移动一天。但是，无论div或img类和position, float, display的哪种组合，它仍然看起来像附带的屏幕截图，即使我已确保文档正在更新。

如何修改HTML / CSS以使V形符号与日期位于同一行？

<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

您遇到问题的原因是块级元素中包含的图像占据了浏览器视口的整个宽度。即便如此，它仍然无法完全按照您的意愿工作，但有很多方法可以实现它。

首先，您可以将图像放在文本左侧和右侧的cdlinux-maly-0.5.8.iso 内。这是最简单的方法。

其次，您可以使用CSS伪类https://www.yelp.com/developers/documentation/v3/business和::before

您还可以设置<h2>的宽度并浮动所有内容，包括图片但必须设置为<h2>以帮助实现此目的。

除此之外还有更多方法。