Question

只是想知道如何设置标题的样式，如附加图像。想到使用两个div，左边是文字，右边是水平重复图像。问题是我需要正确的div的宽度来改变不同的标题长度。

任何帮助将不胜感激！

Answer 1

左右DIVs分别使用width，然后使用right div使用text-align: right;属性，以便右侧div加载的内容保持正确并增加到根据内容的大小而离开

<div class="header">
  <div class="left"></div>
  <div class="right"></div>
</div>

.header{overflow: hidden;} //Considering width: 1000px;
.left{float: left; width: 100px;}
.right{float: right; width: 900px; text-align: right;}

Answer 2

你可以简单地做到这一点;

.header{
    width:100%;
    height:20px;
    background:url('http://jsfiddle.net/favicon.png') repeat;
}
.header span{
    background-color:#FFF;
    display:inline-block;
    height: 20px;
}

<div class="header"><span class="title">Header Text</span></div>

您可以将其包含在各种页面中，标题空间也会相应地重新调整大小。

Here 是一个有效的现场演示

Answer 3

出于语义原因，您只需使用<h1>标记即可，并为其添加背景图片。使用padding-right，您现在可以控制重复自身的次数并填充所需的空间。

CSS标题样式

3 个答案: