以下是我的代码:
我希望将图片放在h1标题旁边,但实际上图片总是出现在标题的顶部。有什么好的想法吗?
<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>
我希望将图片放在h1标题旁边,但实际上图片总是出现在标题的顶部。有什么好的想法吗?
<h1>
是一个 块级元素,浏览器通常会在元素之前和之后换行显示块级元素。但是你可以将其设置为 inline
或 inline-block
。h1 {
display: inline;
}
<div><img src="images/ConfigIcon.png"/><h1>System Configuration</h1></div>
有很多方法可以做到这一点。
其中一些方法非常恶心,应该避免使用,但我认为列出它们是为了说明问题。
使用<img>
上的align
属性。
<div><img src="images/ConfigIcon.png" align="left"/><h1>System Configuration</h1></div>
<img>
嵌套在 <h1>
标签内。<div>
<h1><img src="images/ConfigIcon.png" /> System Configuration</h1>
</div>
<h1>
元素进行 float
。<div>
<img src="images/ConfigIcon.png"/>
<h1 style="float: right">System Configuration</h1>
</div>
<img>
标签。<div>
<img src="images/ConfigIcon.png" style="float: left"/>
<h1>System Configuration</h1>
</div>
<img>
和<h1>
都显示为内联元素。<div>
<img src="images/ConfigIcon.png" style="display: inline" />
<h1 style="display: inline">System Configuration</h1>
</div>
<img>
和<h1>
元素都显示为inline-block
元素。<div>
<img src="images/ConfigIcon.png" style="display: inline-block" />
<h1 style="display: inline-block">System Configuration</h1>
</div>
<div>
<h1 style="background: url(images/ConfigIcon.png) 0 50% no-repeat;padding-left: 16px">System Configuration</h1>
</div>
还有许多其他的...
i
Font Awesome元素和h1
:将i
放在h1
内部是解决方案。 :) - Pragmateek
display
属性。https://css-tricks.com/almanac/properties/d/display/ - jessegavin