如何將內嵌的文本與<button>對齊？

Question

我想知道如何讓它可以讓文本後面跟着一個按鈕，然後是更多的文本，都在一行上？這是它會是什麼樣子：

<h3>Some</h3> 
 
<button>Text</button> 
 
<h3>!</h3>

Answer 1

所有標題標籤如<h3>是塊級，和一個塊級元素佔據它的父元素（容器）的整個空間。您可以將其重置爲display: inline,display: inline-block（推薦），display: inline-table，甚至可以使用flexbox，float等方式。

如果您可以修改標記，我建議不要使用<h3>作爲語義原因，只需使用<span>標記或純文本將是一個更好的選擇。

h3 { 
 
    display: inline-block; 
 
    margin: 0; 
 
}

<h3>Some</h3> 
 
<button>Text</button> 
 
<h3>!</h3> 
 

 
<hr> 
 

 
<span>Some</span> 
 
<button>Text</button> 
 
<span>!</span> 
 

 
<hr> 
 

 
Some 
 
<button>Text</button> 
 
!

Answer 2

給他們一個float: left

h3, button{ 
    float: left; 
    margin: 0; 
} 

https://jsfiddle.net/n79gwgqk/

Answer 3

試試這個：

.ele_inline { 
 
     display: inline 
 
}

<h3 class="ele_inline">Some</h3> 
 
<button class="ele_inline">Text</button> 
 
<h3 class="ele_inline">!</h3>

個