-1

我希望有人可以帮助我！我正在尝试从主题森林（http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 - 向下滚动到底部）实现在这个wordpress模板上看到的预期效果。

基本上在页面上重复一个像素分隔符，并在左侧嵌入文本。我已经尝试了很多不同的 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

4

3 回答 3

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;
}
于 2013-03-11T14:32:19.567 回答
0

如果必须使用文本，可以使用以下 CSS 样式：

.divider17a h3:after{
    content:"//////////////////////////////////////";
    overflow:hidden;
}

并将以下内容添加到您的容器中：

div.divider17a{
    overflow:hidden;
    white-space:nowrap;
}

演示：http: //jsfiddle.net/kyBaN/1/

或者，使用背景图像。

于 2013-03-11T14:33:18.747 回答
0

您能否提供指向您的页面和后续代码的链接？此外，如果您查看他们的代码，这就是他们正在做的事情：

.separator-heading, hr.diagonal {
background-image: url(../img/separator-heading-diagonal.png);
background-repeat: repeat-x;
background-position: 0 50%;

}

于 2013-03-11T14:33:31.300 回答