插入文字的水平分隔線

-1

我希望有人能幫助我！我試圖從themeforest（http://themeforest.net/item/lespaul-retina-responsive-wordpress-theme/full_screen_preview/4083224 - 向下滾動到底部）在wordpress模板上實現期望的效果。插入文字的水平分隔線

基本上有一個像素分割器在整個頁面上重複，並在左側嵌入文本。我已經嘗試過許多不同的CSS代碼和html ...這應該是一件容易的事情，但我似乎無法得到它。

我已經得到了實現這種效果最接近的是水平分隔與下它的文本...

//////////////////// /////////

文本（居中）

，但我想有

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

來源

2013-03-11 user2157030

你能提供一個到你的頁面和後續代碼的鏈接嗎？此外，如果你看看他們的代碼，這是他們在做什麼：

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

}

來源

2013-03-11 14:33:31 MGDTech

謝謝！我實際上嘗試過，但它沒有工作...再試了一次，它沒有嘿=）謝謝你= D – user2157030 2013-03-11 15:13:28

很高興它的工作。確保你註冊並標記爲正確的答案！ – MGDTech 2013-03-11 15:22:16

有沒有你不只是使用他們還是使用相同的造型理由嗎？

<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-11 14:32:19

如果有您可以使用下面的CSS樣式使用文本：

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

，並添加以下到您的容器：

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

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

或者，使用背景圖像。

來源

2013-03-11 14:33:18 otinanai

插入文字的水平分隔線

回答

相關問題