我有一些动态标题,其设计要求每个词都在自己的行上。这是所需的外观: http://jsfiddle.net/alanweibel/2LEmF/2/ (注意每个单词的黑色背景)
我需要帮助的问题是保持上面的样式,同时将整个标题放在一个标签中。我无法在每个单词前后动态插入 H1。
我需要更改 HTML 标记
<div class="tagline">
<h1>
Oh
</h1>
<h1>
Look
</h1>
<h1>
A
</h1>
<h1>
Headline
</h1>
<h1>
Thanks
</h1>
</div>
类似于
<div class="tagline">
<h1>
Oh Look A Headline Thanks
</h1>
</div>
同时保持与上面链接中相同的样式。
提前致谢。
最佳答案
参见: http://jsfiddle.net/thirtydot/HksP2/
它在 IE9、IE8 和最新版本的 Firefox、Chrome、Safari、Opera 中看起来很完美;全部在 Windows 7 上。它在 IE7 中相当好地降级。在 Mac 上的 Safari 中,它几乎完美。
这是基于 previous answer .引用我自己的回答:
Note that the
line-height
andpadding
adjustments can be very tricky to get right.
line-height: 1.83;
看起来不错,是通过选择看起来接近你想要的东西,然后通过反复试验找到在 Chrome 和 Firefox 中都有效的东西(他们以不同方式呈现文本)。
HTML:
<div class="tagline">
<h1><span>
Oh Look A Headline Thanks
</span></h1>
</div>
CSS:
.tagline {
display: inline-block;
width: 0;
line-height: 1.83;
padding: 1px 0;
border-left: 20px solid #000;
}
.tagline h1 {
font-size: 20px;
font-weight: normal;
color: #fff;
background: #000;
display: inline;
padding: 8px 0;
text-transform: uppercase;
}
.tagline span {
position: relative;
left: -10px;
}
关于html - 标题中的每个词在他们自己的行 HTML/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9171219/