如何转换一个块级元素通过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}