html - 带有空格的文本下方的行。是否可以通过 html 和 css？

Question

我为此花费了数小时。我试图在所附图片上描述问题。 有必要用白线包裹文本，行与文本之间有一些空格。

我想到的第一个解决方案 - 只是使用 smth 行“margin-top:-20px;”将文本放在线上并为文本容器提供自定义背景(例如，灰色)。但这不是解决方案，因为容器的背景是透明的:(

我想像这样制作 smth(使用“float:left”):

<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>
<div class="text">TEXT</div>
<div class="line"></div>

但如果我对所有元素都使用 float:left，则会出现另一个问题:白线应该在容器的右侧结束。

也许有一些针对此问题的 css 最佳实践，或者有人可以提供一些建议..？ 任何想法都会有所帮助:)!

Answer 1

http://jsfiddle.net/Q8yGu/5/

HTML

<header><div><span class="spacer"></span><h1>Text</h1><span class="spacer"></span><h1>Text</h1><span class="spacer"></span></div></header>
<header><div><span class="spacer"></span><h1>100% Container Width</h1><span class="spacer"></span></div></header>

CSS

body {
    background:yellow;
}
header {
    display:table;
    width:100%;
    max-width:100%;
}
header div {
    display:table-row;
    line-height:1.5em;
    font-size:2em;
    white-space:nowrap;
}
header h1 {
    font-size:inherit; /* Change font-size in header */
    overflow:hidden;
    display:table-cell;
    vertical-align:middle;
    width:1px;
}
header span.spacer {
    display:table-cell;
}
header h1 {
    padding:0 10px;
}
header span.spacer:after {
    display:inline-block;
    width:100%;
    content:".";
    font-size:0;
    color:transparent;
    height:2px;
    background:#000;
    vertical-align:middle;
    position:relative;
    top:-1px;
}
header > a {
    font-size:.4em;
    vertical-align:middle;
    background:#25a2a4;
    color:#fff;
    text-transform:uppercase;
    font-family:monospace;
    border-radius:.5em;
    padding:.3em .5em;
    text-decoration:none;
}

注意:要添加对 IE8 的支持，请使用 header 以外的元素或使用 html5shiv .