如何在我的文本之後創建一行到容器的寬度？

是的，我是一個新手，所以請放輕鬆。我知道有幾種方法可以實現這一點。基本上我一直試圖想出一個一致的方式，在文本後面有一行，這個文本將運行到一個容器元素的整個寬度。如何在我的文本之後創建一行到容器的寬度？

事情是這樣的：

This is my header _______________________________________________________ |<- end container 
This is another header __________________________________________________ |<- end container

我試圖創建使用底部邊界創建線.line區段類，但我已經成功創造一個可變長度的線，將延長容器的整個寬度。

這是我已經試過：

CSS：

.line 
{ 
    display:inline-block; 
    border-bottom:2px #5B3400 solid; 
    margin-left:5px; 
    width:80%; 
}

HTML：

<h2>Our Mission<span class="line"></span></h2>

當然，這只是給我的容器的線80％來自左邊框包括文字的寬度。我怎樣才能創建一個以文本開頭並且運行邊框的全部寬度的行，而不管同一行上有多少文本？

我知道這應該很容易，但我還沒有找到解決方案。

謝謝！

來源

2013-02-20 s.bramblet

對不起wintercounter我是新來的網站，所以它不會讓我遇到兩個解決方案！ :( 此外，在阿克塞爾的解決方案，我補充說我使用一個紋理背景的評論，我覺得這已經把我在正確的軌道我只是現在需要弄清楚的背景問題上。 THX！ – 2013-02-20 21:51:57

此方法將紋理背景的工作（背景圖片）：

如果您的<h2>位於背景圖片的頂部，您可以嘗試使用此方法。

HTML：

<h2 class="line-title"><span>This is my title</span><hr /></h2>

CSS：

.line-title { 
    font-size: 20px; 
    margin-bottom: 10px; 
    padding-top: 1px; /* Allows for hr margin to start at top of h2 */ 
} 

/* clearfix for floats */ 
.line-title:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.line-title span { 
    padding-right: 10px; 
    float: left; 
} 

.line-title hr { 
    border:1px solid #DDD; 
    border-width: 1px 0 0 0; 
    margin-top: 11px; 
}

看到這裏的工作示例：http://jsfiddle.net/yYBDD/1/

它是如何工作：

<h2>標記充當浮動元素的容器。
<span>向左浮動，導致<hr />向左摺疊並填充右側空間。
<hr />充當行，並填充剩餘空間的權利。

來源

2013-02-20 22:38:29 Axel

就是這樣！完美，謝謝阿克塞爾！我改變了行以匹配我的字體顏色，並將.line-title hr {margin-top}調整爲27px，以便將該行放在字體底部（我的字體大小爲28px），但除此之外，這完全是我的尋找！ – 2013-02-21 04:56:55

HTML：

<h2><span>Our Mission</span></h2>

CSS：

h2{ 
    border-bottom: 1px solid #000; 
    height: 20px; 
    overflow: visible; 
    display: block; 
    width: 100%; 
} 

h2 span{ 
    display: inline-block; 
    background: #fff; 
    height: 21px; 
}

這樣，它會在底部邊框溢出，因爲它具有更大的高度。

演示：http://jsfiddle.net/afuzk/

來源

2013-02-20 21:03:12 wintercounter

更新代碼並添加jsfiddle鏈接 – wintercounter 2013-02-20 21:06:25

好的解決方案thx！你和Axel在同一個波長上！ – 2013-02-20 21:49:22

此方法將工作，固體背景顏色：

HTML：

<h2 class="line-title"><span>This is my title</span></h2>

CSS：

.line-title { 
    border-bottom: 1px solid #DDD; 
    font-size: 20px; 
    height: 12px; 
    margin-bottom: 10px; 
} 

.line-title span { 
    background: #FFF; 
    padding-right: 10px; 
}

這裏你可以看到一個工作示例：http://jsfiddle.net/yYBDD/

它是如何工作。

的<h2>標籤有一類設置的高度，以它包含文本的高度的一半。
<h2>有一個底部邊框，擴展到它的父容器的寬度（因爲它是一個塊元素）。
<span>裏面的<h2>有一個白色背景，它將覆蓋文本和邊框重疊的區域。
最後，<h2>>有一個底部邊距，用於補償<h2>的降低高度。

來源

2013-02-20 21:04:50 Axel

thx爲此我更喜歡能夠使用類，因爲它提供了更多的靈活性。完美的解決方案，不幸的是我的頁面有一個帶紋理的背景，在這種情況下，我只需要將背景屬性設置爲我的紋理？ – 2013-02-20 21:50:44

@ user2092975如果你有一個紋理，它很可能不會正確排列。方法只能在堅實的背景下工作。 – cimmanon 2013-02-20 21:54:47

這就是我所看到的。謝謝。我會繼續嘗試。 – 2013-02-20 22:14:59

這裏的東西我想和工作：

HTML

<h2>Our Mission</h2>

CSS

h2:after 
{ 
    content:  "\00a0"; 
    border-bottom: solid 2px black; 
    position:  fixed; 
    top:   0; 
    width:   100%; 
    margin-left: 3px; 
}

的JS斌測試：http://jsbin.com/ayuvuc/4

來源

2013-02-20 21:29:48

THX在你的測試看起來很棒，但沒有爲我工作。我在css 2.1上，並試圖保持與一些舊瀏覽器的兼容性 - 是'display：box'css 3.0屬性？我可以在css 2.1中實現這個嗎？ – 2013-02-20 22:21:58

你不需要'display'屬性。嘗試沒有它... :) – 2013-02-20 22:30:26

您可以使用flexbox來執行此操作。

http://jsfiddle.net/eHHep/（前綴不含稅）

<h1 class="lineme">This is my header</h1> 

<h2 class="lineme">This is another header</h2> 

.lineme { 
    display: flex; 
} 

.lineme:after { 
    display: block; 
    content: " "; 
    border-bottom: 1px solid; 
    flex: 1 1 auto; 
}

優於其他方法：

需要不需要任何額外的標記
背景顏色

一面：

支持Flexbox將是低，由於IE10是第一個IE瀏覽器來支持它（見http://caniuse.com/#search=flexbox）
你的行會消失，如果你的文字環繞

來源

2013-02-20 21:41:50 cimmanon

如何在我的文本之後創建一行到容器的寬度？

回答

相關問題