html - 在带有空格的文本下划线。是否可以通过HTML和CSS？

我已经花了几个小时了。我试图在附加的图像上描述问题。
有必要用白线包裹文本，并在各行和文本之间留一些间隔。

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

我想这样做(使用“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最佳实践，或者有人可以提供一些建议。
任何想法都会有所帮助:)!

最佳答案

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。

关于html - 在带有空格的文本下划线。是否可以通过HTML和CSS？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11317676/