在CSS中，如何創建一個垂直居中的線，佔用塊元素後剩餘的水平空間？

我正在實現一個包含語義標題（h3，h4等）的元素的設計，它們是全寬度塊元素，後面跟着一個垂直居中的水平線，它擴展了標題a的全部寬度：在CSS中，如何創建一個垂直居中的線，佔用塊元素後剩餘的水平空間？

headers

我知道我可以照顧這通過在<div>包裹每個頭和插入後，另一個塊級元素，但寧願不污染我的HTML這樣。我的第一個傾向是在頭部使用::after元素，像這樣：

.line-header::after { 
    content:'\00a0'; 
    display: inline-block; 
    float: right; 
    width: 55%; 
    margin-top: -12px; 
    border-bottom: 1px solid gray; 
}

然而，這需要使得::after元素固定寬度，這顯然不符合不同寬度頭工作：http://jsfiddle.net/nbSTf/

關於如何獲得一個可變寬度的行的任何想法，它將填充頭部右側的空間，而不會在HTML中插入額外的元素？

編輯：下面（暗示繪製標題的後面線全寬並設置背景顏色擦除文本後面的線） Tyriar的回答提醒我，這是發生在一個重複的背景圖像的前面 - 不幸的是沒有背景技巧可能。

來源

2013-03-15 Eric P

試試這個爲你的CSS：

編輯：

body { background: red; overflow-x: hidden } 

.line-header { 
    margin-top: 15px; 
    margin-right: 5px; 
    display: inline; 
    z-index: 100; 
    float: left; 
    clear: left; 
} 

.line-header::after { 
    position:absolute; 
    content:'\00a0'; 
    width: 100%; 
    margin-top: -12px; 
    margin-left: 5px; 
    border-bottom: 1px solid gray; 
    z-index: 0; 
}

我只在Chrome中測試了這個。 Here's the Fiddle。

來源

2013-03-15 01:58:29

我對你的方法印象深刻，並不知道發生了什麼。我曾經玩過它，顯然它可以很容易地打破，沒有圍繞'.line-header'的包裝http://jsfiddle.net/Tyriar/uJ5ww/仍然，很好的解決方案:) – 2013-03-15 09:32:01

這是一個有趣的解決方案 - 然而，甚至在Tyriar的小提琴中，包裝div將「寬度：100％」約束到合理的數量，如果滾動到結果窗格的右側，水平線仍然是相同的寬度，正確的 - 我有同樣的問題，但相反。 :)我需要它們排列在包含元素的RH邊緣。我錯過了什麼嗎？ – 2013-03-15 20:41:04

@Eric P我的小提琴展示了一個反例，而不是修復。溢出x也可能是不夠的。這隻會在內容不在頁面中心並且不需要填充時才起作用。 – 2013-03-16 00:56:47

這裏有一個方法，你可以做到這一點，不幸的是它依賴於一個屬性（不一定是title），但這可以很容易地用JavaScript編程設置。

它使用:before和:after僞構件，:after用於繪製線的整個寬度和:before用於繪製文本的大小的文本後面白色背景。僞元素需要正確設置其z-index以正確的順序進行分層。

jsFiddle

Screenshot of example

HTML

<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3> 
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>

CSS

.line-header { 
    margin-top: 15px; 
    position:relative; 
} 
.line-header:before { 
    position: absolute; 
    display:block; 
    top:0; 
    left:0; 
    bottom:0; 
    content: attr(title); 
    background-color:#FFF; 
    color:#FFF; 
    z-index:-1; 
    padding-right:.5em; 
} 
.line-header::after { 
    position:absolute; 
    content:''; 
    display: block; 
    left:0; 
    right:0; 
    top:50%; 
    background-color:#555; 
    height:1px; 
    z-index:-2; 
}

來源

2013-03-15 01:48:56

謝謝，Tyriar - 我最初是在尋找一些非常像這樣的東西，但不幸的是，標題背後的背景是一個重複的圖像，它們混合了背景技巧。我將編輯這個問題來澄清這一點。 – 2013-03-15 20:27:09

是的，如果你有一個平鋪的背景，它會變得更加艱難。 – 2013-03-16 00:57:53

那麼，如何做相反呢？繪製線條（以任何你喜歡的方式），然後使用:after來插入標題，沒有額外的HTML，但一些額外的CSS。

HTML

<div id="header1"></div> 
<div id="header2"></div>

劃清界線，只是border-top-style:solid;。撰寫標題，:after。

CSS

div 
{ 
    position:relative; 
    border-top-style:solid; 
    margin-top:20px; /* just for spacing */ 
} 
div:after 
{ 
    display:block; 
    background-color: #FFFFFF; 
    position:absolute; 
    top:-10px; 
    left:0px; 
} 
#header1:after 
{ 
    content:"Hello;" 
} 
#header2:after 
{ 
    content:"Hello Again"; 
}

你就會得到這樣this。

如需更多定製，您可以放大字體，更改顏色，添加填充（用於更多空白區域），只需更改top它適合您的方式即可。

來源

2013-03-15 02:32:39

在CSS中，如何創建一個垂直居中的線，佔用塊元素後剩餘的水平空間？

回答

相關問題