在标题和链接之间垂直重复图像填充空间

Question

我很难过这个。实现这一目标的最优雅/最有效的方法是什么？我在左边有一个h3，重复的符号/图像（“::::::”），然后是一个链接。这发生在整个站点的几个h3 /链接区域之间。

另请注意，我使用的是十二列模式，特别是Foundation。

Answer 1

使用重复符号和宽度100％设置背景元素，然后将白色背景设置为文本并将其放在背景上。

<div id="wrapper">
   <div id="text1">Featured Courses</div>
   <div id="text2">See All Courses</div>
</div>

和CSS：

#wrapper{
   width:100%;
   background:url(image.png) repeat-x;
   height:20px;
}
#text1, #text2{
   background-color:#fff
   padding:5px
   height:10px;
}
#text1{
   float:left
}
#text2{
   float:right
}

这可能不是完全你需要的东西，但你明白了。