我希望有人可以帮助我!我正试图通过themeforest(http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 - 向下滚动到底部)来实现此wordpress模板上所需的效果。
基本上在页面上重复使用像素分隔符,并在左侧嵌入文本。我已经尝试了SOOO许多不同的CSS代码和HTML ...它应该是一件容易的事情,但我似乎无法得到它。
我最接近达到此效果的是水平分隔线,下面有文字......
/////////////////////////////
TEXT(但居中)
但我想
TEXT ///////////////////////////
这是我的代码!
div.divider17a {
height:5px; width:100%; border:0; background:url(images/divider17.png) repeat-x;
margin:35px 0 25px;
padding:0;
text-align:left;
float:left;
width:100%;
}
div.divider_notext {
margin:50px 0 20px;
}
div.divider_left1 {
text-align:left;
}
HTML
<div class="divider17a divider_left1"><h3>Strategic Planning</h3></div>
非常感谢任何帮助......谢谢= D
答案 0 :(得分:1)
您是否有理由不使用他们使用的相同样式?
<h3 class="widget-heading separator-heading">
<span class="text-holder">Companies that trust us</span>
</h3>
.separator-heading {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}
.separator-heading .text-holder {
display: inline-block;
padding: 0 .6em 0 0;
background-color: white;
}
答案 1 :(得分:0)
如果您必须使用文字,则可以使用以下CSS样式:
.divider17a h3:after{
content:"//////////////////////////////////////";
overflow:hidden;
}
并将以下内容添加到容器中:
div.divider17a{
overflow:hidden;
white-space:nowrap;
}
演示:http://jsfiddle.net/kyBaN/1/
或者,使用背景图片。
答案 2 :(得分:0)
您能提供指向您的网页和后续代码的链接吗?此外,如果你看看他们的代码,这就是他们正在做的事情:
.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;
}