CSS - 内联不使用位置绝对

Question

这是我想要实现的目标的图像。

的 HTML： <h2>Some text<br /> even more text</h2>

CSS

作品

display: inline;
line-height: 1.7em;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

不起作用

display: inline;
line-height: 1.7em;
position: absolute;
top: 80px;
z-index: 2;
font-size: 65px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

有关如何解决这个问题的想法吗？

Answer 1

当您绝对定位元素时，

inline隐式变为block，请参阅

Css 2.1, 9.7 Relationships between 'display', 'position', and 'float'

如果你想达到这个效果，你需要在这个标题中使用一个额外的内联元素。

Answer 2

三个步骤：

• 在<h2>
中包裹<span>标题的每个部分
• 每个span display inline-block
• 将box-shadow应用于每个span

工作示例：

h2:nth-of-type(1) {
display: inline;
line-height: 1.7em;
font-size: 18px;
color: #333;
background-color: #FFF;
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}

h2:nth-of-type(2) {
display: inline-block;
position: absolute;
top: 80px;
z-index: 2;
color: #333;
background-color: #FFF;
}

h2:nth-of-type(2) span {
display: inline-block;
font-size: 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

<h2>Some text<br />even more text</h2>
<h2><span>Some text</span><br /><span>even more text</span></h2>