我完全无法尝试让左 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;
}
最佳答案
您的问题的原因是您的图像包含在 block 级元素中,这些元素占据了浏览器视口(viewport)的整个宽度。即使那样,它也不会完全按照您的意愿工作,但有很多方法可以实现。
首先,您可以将图像放入 <h2>
中在文本的左侧和右侧。这是最简单的方法。
其次,您可以使用 CSS 伪类 ::before和 ::after
您还可以设置 <h2>
的宽度并 float 所有内容,包括图像,但必须设置为 inline
帮助实现这一目标。
方法不止这些。
关于html - 如何将图像与 HTML/CSS 中的 h1 元素放在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43128119/