CSS中H3元素不继承父元素宽度

Question

我有一个class为'screenshot'的div（粉色），里面包含了一个图片元素和一个标题元素（蓝色）。如下图所示，h3标签没有被其固定宽度的父元素所包含。如何才能将标题元素包含在父div中，使其宽度相同？指定宽度、margin、padding等都不起作用。

HTML：

<div class="screenshot"><a href="#">
<img src="img/vert_img1.png" alt="Image description">
<h3>Heading #1</h3>
</a>
</div>

CSS：

#screenshots .screenshot
{
    background: pink;
    width: 209px;
    margin: 2px;
    padding-bottom: 1px;
}

.screenshot a img
{
    width: 200px;
    height: 150px;
    margin-right: 0px;
}

.screenshot a h3
{
    background-color: blue;
    margin-bottom: 10px;
    text-align: center;
    width: 209px;
}

- JCraine

---

Stack Overflow使用Markdown语言。请参考http://stackoverflow.com/editing-help - 我已经为您修复了问题。 - BoltClock

请注意，在<a>标签内部嵌套<h3>是无效的。 - BoltClock

不想挑刺，但除非您使用HTML5规范，从技术上讲，您不应该使用锚标记包装块级元素。 - Walker

@Walker 即使我们在谈论HTML5，你仍然应该避免这种情况，因为没有HTML5解析器的浏览器（例如Firefox 3.6）仍可能会遇到此类问题。 - Yi Jiang

请使用JS Bin编写您的代码示例。我认为您在问题中可能漏掉了一些相关的内容，这样做应该会有所帮助。 - thirtydot

Answer 1

这个演示是否解决了你的问题？

我已经修复了标记，正如其他评论所指出的那样，因为在a中放置h3（或任何块级元素）是无效的。

- andyb

---

感谢修复，网站也很棒 - 我会开始使用它的。 - JCraine

Answer 2

将 h3 标签改为 span 标签，并添加一个类。在“a”标签中不能包含 h3 标签。

span.whateverclass {
    display: block;   
    margin: 0;  
    padding: 0;  
}

你不需要为其指定宽度，因为块级元素的总宽度是其包含块的宽度（基本上是这样）。在你上面的示例中，可能是另一个元素给h3指定了宽度。

另外

a, img  {  
display:block;  
}

可能有所帮助。

- Gazzer

---

我最终将h3更改为span-之后效果很好！谢谢！ - JCraine

在这个网站上表示感谢的最好方式是点击数字上方的箭头 :-) 也请为您接受的答案这样做！ - Gazzer

Answer 3

感谢大家的帮助，我犯了初学者的错误，把块级元素放在内联元素里。是否可以在锚点标签中放置多个内联元素？

这是我最终得到的结果：

<div class="screenshot">
    <a href="#">
        <img src="img/2_graphic.jpg" alt="Graphic Design">
        <span>GRAPHIC DESIGN</span>
    </a>                
</div>

#screenshots .screenshot { width: 209px; float: left; margin-right: 35px; padding-bottom: 30px; }

.screenshot a img { width: 200px; height: 140px; margin-right: 0px; }

.screenshot a span { font-size: 90%; color: white; display: block; text-align: center; }

- JCraine

Answer 4

你尝试过简单地将h3定义中的硬编码宽度去掉吗？

你没有明确地移除填充，所以实际上是291像素加上浏览器在元素上实现的默认填充，这可能是超出父容器边界的原因。

- jonezy