7

我在这上面花了几个小时。我试图描述附加图像上的问题。有必要用白线换行文本，行和文本之间有一些空格。

在此处输入图像描述

我想到的第一个解决方案 - 只是使用 smth line "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最佳实践，或者有人可以给出一些建议..？任何想法都会有所帮助:)！

4

5 回答 5

5

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 的支持，请使用除 html5shiv 之外的元素header或使用html5shiv。

于 2012-07-03T20:18:36.617 回答
1

要真正做你想做的事，让行穿插文本占据父容器的 100%，文本块均匀分布，很可能需要使用 javascript。可以为此目的创建一个 jQuery 插件。

这是一个极其粗略的代码版本，可能是这种解决方案的开始

http://jsfiddle.net/jackwanders/XJNpz/

但即使在这里，保持线条的适当宽度也不是理想的，因为快速缩小视口会导致一条线分解。

于 2012-07-03T20:11:43.727 回答
0

HTML：

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

CSS：

.line {
    width: 100px;
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left;
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

在此处输入图像描述

现场演示：jsFiddle

jQuery方法：

HTML：

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

CSS：

#container
{
    width: 1000px; 
}
.line {
    padding-top: 15px; /* font-size / 2  = (30/2=15) */
    border-bottom: solid 1px #000;
    float: left; 
}
.text {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    float: left; 
}

JavaScript：

var text_width = parseInt($(".text").css("width"));
var container_width = parseInt($("#container").css("width"));
var line_width = (container_width - text_width) / 2;    
$("div").find(".line").css("width", line_width+"px");
于 2012-07-03T19:30:16.970 回答
0

我昨天回答了同样的问题。在这里，看看 ->如何在带有 CSS 的 html 标题中间有一条水平线？

它依赖于线性渐变。如果您不支持旧的 IE，它可以完美运行。

于 2012-07-03T20:07:19.557 回答
0

检查这个：

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
    $(window).resize(function(){
        $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
    });
    $('.line').width(($(window).width() - $('.text').width()*2) / 3 - 8);
})
</script>
<style>

.line{
    margin-top:9px;
    border:1px solid silver;
    float:left;
}

.text{
    margin:auto;
    float:left;
}

</style>
<body>
<div class="line"></div>
<div class="text">text 1</div>
<div class="line"></div>
<div class="text">text 2</div>
<div class="line"></div>
</body>
</html>
于 2012-07-03T20:22:49.083 回答