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

Question

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

另请注意，我使用的是12列架构，特别是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 
} 

这可能是不准确你需要什么，但你的想法。