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>