如何才能在文本後面實現這一行？

The effect I'm talking about 如何才能在文本後面實現這一行？

嘿！

我想創建一個像上圖中的效果。這些行的寬度需要是動態的，因此它們適合中間的文本。我試着用一張桌子：

  <table> 
       <tr> 
        <td><hr /></td> 
        <td><p>The 20th of</p></td> 
        <td><hr /></td> 
       </tr> 
      </table>

但是線條不僅填滿了我所期望的空間。我怎樣才能解決這個問題？有沒有比使用表格更好的方法？

編輯：只注意到圖像中的錯字。請忽略它。

來源

2013-02-20 dislick

[css技術用於中間有文字的水平線]的可能重複（http://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal- line-with-words-in-中間）和http://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-hr-like-line – j08691 2013-02-20 17:13:50

此評論有我的情況下完美的解決方案：http ：//stackoverflow.com/a/14731123/1309907 – dislick 2013-02-20 17:37:40

最簡單的方法可能是讓行的背景圖像，然後把另一個HTML元素在它前面包含文本：

<div class='linebehind'> 
    <span class='text'>The 20th of</span> 
</div> 

<style> 
.linebehind { 
    background: url('imageWithLine.gif') repeat-x; 
    text-align: center; 
} 
.text { 
    display: inline-block; 
    background: white; /* or whatever colour the background of the line image is */ 
    padding: 0 5px; 
} 
</style>

注：此代碼可能是不完美的，但它應該是或多或少你想要一點調整。

來源

2013-02-20 17:19:05 DiMono

也試過了，但我有多個背景，我不能將它設置爲一種顏色。不管怎麼說，還是要謝謝你！ – dislick 2013-02-20 17:29:36

如何才能在文本後面實現這一行？

回答

相關問題