如何轉換一個塊級元素通過CSS

Question

內聯比方說，我有這樣的內容：

<div class="entry"> 
<p>I want to display <br /><h2>heading level elements like this</h2> 
<p> as inline elements on the same line with the text that preceded them as well as...</p> 
<p>the text that<br /> 
<h3>(another heading element)</h3> 
<p>, follows them...</p> 
</p></p> 
</div> 

我想標題元素內嵌顯示在文本中，就好像他們只是大膽的文字，與內容大小相同。

有什麼想法CSS會完成這個與上面的例子，而不改變內容？

Answer 1

使用display:inline屬性：

.entry h2, /* Combining two selectors: h2/h3 as a child of class=entry */ 
.entry h3 { 
    display: inline; 
} 

參見：MDN, CSS display

Answer 2

您可以使用display: inline或display: inline-block。如果要設置元素的寬度或高度，請使用後者。 inline-block的行爲類似於block元素，不同之處在於它呈現內聯。

.entry h2, .entry h3 { 
    display: inline; 
} 

Answer 3

你可以做這樣的事情：

h3{display:inline; } 

或者你可以把一個跨度來代替，並給它相同的樣式H3

<div class="entry"> 
<p>I want to display <br /><h2>heading level elements like this</h2> 
<p> as inline elements on the same line with the text that preceded them as well as...</p> 
<p>the text that<br /> 
<span class="h3Like">(another heading element)</span> 
<p>, follows them...</p> 
</p></p> 
</div> 

並添加CSS這樣

.h3Like{font-size:15px;font-weight:bold}