html - html层次结构变化

Question

在更改之前，我像这样在一页中更改了标记

<div class="header-wrapper header">         
   <h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>

改变后

 <h1 class="header-wrapper header">         
    <span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
 </h1>

更改标记后“Excellence Holden”的字体大小正在增加。它会发生还是我做错了什么？

CSS代码：

.header-wrapper {
    padding:15px 0;        
}
 .header-wrapper .dealer-name {
     text-align: center;
     font-size: 1.3em;
}

score 0 · Accepted Answer

您需要在css中更改span的字体大小，找到为h1定义的字体，然后将相同的字体应用于标签

score 0 · Accepted Answer

0

因为如果你不重置font-sizefor h1，它会自动高于正常值。

于 2013-03-28T09:40:55.383 回答

score 0 · Accepted Answer

我会说这是与 CSS 相关的，

通常，新的 CSS 文件包含标签的字体 ( Size, Family, weight) 属性。<h1>

请检查两者h1和spanCSS 属性。您可以使用浏览器检查器（Chrome Inspect Element）查看实际属性。

score 0 · Accepted Answer

是因为你的造型。像这样更改 HTML 时，您需要确保样式也相应更改。

例如：

div.header { font-weight:bold; }
div.header h1 { font-size:24px; }

上面的 CSS 将应用于第一个 HTML 片段，而不是第二个。您必须将其更改为：

h1.header { font-weight:bold; }
h1.header span { font-size:24px; }

并确保没有其他可能影响这一点的样式h1。span

score 0 · Accepted Answer

更改后，设置在内部元素上的字体大小1.3em，改变其含义。原因是在font-size元素的值中使用时，em单位表示父元素的字体大小。这里的父元素是一个h1元素，常用且推荐的浏览器默认是该h1元素的字体大小为2em，即其父元素字体大小的两倍。

要覆盖此效果，请添加以下内容：

h1.header-wrapper { font-size: 1em; }

5 回答 5