为什么某些元素的背景会沿着DIV的宽度延伸，有些则不会？

Question

我有一个相当丰富多彩的背景，为了使文字清晰可辨，它设置在半透明背景上。 H1，P都显示背景的div的全部宽度。然而，span s和a s仅显示它们的背景。后者的行为是我更喜欢的，绝对是标题，但也可能是段落。

|-------------width of div-----------| 
|{Header:BG fills whole div_________}| 
| {LINK}       | 
|{Paragraph:Same behavior as header_}| 
|      {SPAN}  | 
|------------------------------------| 

我对CSS偏好使用了CSS严格的HTML。

Answer 1

<h1>,<p>,<span>和<a>之间的区别在于，前两个默认为"display:block"，后两个是"display:inline"。

将"display:block"属性添加到您的<a>和<span>应该这样做。

回应评论：

我会添加视觉examle：

<div style="width:300px; border:1px solid #444"> 
    <div style="background:#999">This is a div</div> 
    <a style="background:#999">This is a link</a> 
    <h1 style="background:#999">This is a header</h1> 
    <span style="background:#999">This is a span</span> 
</div> 

回报this

而

<div style="width:300px; border:1px solid #444"> 
    <div style="background:#999">This is a div</div> 
    <a style="background:#999; display:block">This is a link</a> 
    <h1 style="background:#999">This is a header</h1> 
    <span style="background:#999; display:block">This is a span</span> 
</div> 

回报this

你正试图做到这一点，对吧？