HTML CSS将两个元素对齐在同一行

Question

我需要创建上面的HTML。

它是一个带蓝色背景的h3，右边是一个用于刻度的SVG。

我需要将两个元素放在同一行，并将SVG嵌入到h3中。

这看起来很简单，但我无法弄清楚如何做到这一点。

实现上述目标的最佳方法是什么？

Answer 1

<h3 style="background-color:blue;">About You 
    <img src="image.png" style="float:right;display:block;">
</h3>

Answer 2

只需创建一个包含图片的<h3>，然后在<h3>处为顶部和底部空间应用填充。

h3{
  font-family:arial;
  font-size:18px;
  color:#fff;
  background:blue;
  margin:0;
  padding:5px 10px;
}
h3 img{
  float:right;
}

<h3>About Us <img src="tick.png"></h3>

Answer 3

正如其他人已经回答了要使用的CSS一样，我只是想推广一种额外的方法：

假设你有多个带有样式标记的标题，那么每次都不必总是添加整个<img />标记及其所有属性。
因此，只需向<h3>添加一个类就可以了：

<强> HTML

<h3 class="blue-bg tick">About You</h3>

<强> CSS

h3.blue-bg {
  background: blue;
  /* and what else you need */
}
h3.tick:after {
  content: '';
  background-image: url("/path/to/your/image-tick.svg");

  /* you need to define the dimensions: */
  background-size: 18px 18px;
  width: 18px; height: 18px;

  /* and what else you need */
}

所以你可以将你定义的类添加到每个元素而不是大量的HTML。

完整代码片段试用并摆弄：

h3.blue-bg {
  background: #21abe2;
  
  /* and what else you need */
  font-family: helvetica, arial;
  font-size: 18px;
  color: #fff;
  margin: 0;
  padding: 5px 10px;
}
h3.blue-bg.dark {
  background: blue;
  font-style: italic;
}

h3.tick:after {
  content: '';
  background: transparent url("https://upload.wikimedia.org/wikipedia/commons/2/27/White_check.svg") no-repeat center;
  background-size: 18px 18px;
  
  /* and what else you need */
  display: block;
  float: right;
  width: 18px;
  height: 18px;
}

<h3 class="blue-bg tick">About You</h3>
<br/>
<h3 class="blue-bg tick">Another crazy Headline</h3>
<br/>
<h3 class="blue-bg dark tick">Even with other styles defined</h3>