沒有得到與CSS

我試圖讓與CSS這樣的效果（即小灰邊線啄）想要的效果：沒有得到與CSS

enter image description here

然而，沒有什麼的，我做的是什麼工作。我的代碼如下所示：

<header class="entry-header"> 
    <div class="entry-title"> 
     <h1>Contact</h1> 
    </div> 
    <div class="entry-float"></div> 
</header><!-- .entry-header -->

我已經試過floatingdiv.entry-title左，paddingdiv.entry-float，改變div.entry-float到<span>，使用上只有一個div背景試過，所有失敗的它。

這必須100％靈活，因爲不是所有的標題都是相同的寬度。我寧願完全避免使用Javascript/jQuery。

有人可以協助嗎？

來源

2014-09-04 Albert

將您的標題換成2行嗎？ – haxxxton 2014-09-04 06:02:46

@haxxxton，它永遠不會換行到2行。 – Albert 2014-09-04 06:07:24

有各種各樣的方式來實現這一目標，其中之一是增加僞元素頭，完全根據需要將它定位並隱藏其他與overflow: hidden：

<h1>Content</h1>

h1 { 
    text-transform: uppercase; 
    font-size: 1em; 
    color: grey; 
    position: relative; 
    overflow: hidden; 
} 

h1:after { 
    content: ""; 
    display: inline-block; 
    height: 4px; 
    width: 100%; 
    background: grey; 
    position: absolute; 
    top: 8px; 
    margin-left: 10px; 
}

JSBin。

來源

2014-09-04 06:09:34

完美，正是我想要它。謝謝。 – Albert 2014-09-04 07:52:50

我會這樣做，你把「線」作爲一個CSS3僞元素對齊到容器的中心。然後給標題元素添加填充的背景顏色，並將其放在行的頂部。這將允許可變長度標題。

body{ 
    background:#FAFAFA; 
} 
.entry-title{ 
    position:relative;  
    margin:0 110px; 
} 
.entry-title:before{ 
    position:absolute; 
    content:""; 
    top:50%; 
    background:#f7f7f7; /* line color */ 
    left:0; 
    right:0; 
    height:10px; 
    margin:-5px 0 0; /* = half the height value */ 
} 
h1{ 
    position: relative; 
    color: #d9d9d9; 
    padding:0 20px 0 0; /* increase this number to add more spacing to the right of your title before the line */ 
    background:#fafafa; /* same as background color of container element */ 
    display:inline-block; 
}

JSFIDDLE DEMO

來源

2014-09-04 06:08:09 haxxxton

謝謝。我接受了Klaster_1的答案，因爲它的代碼更少，更清潔，但您的解決方案也可行。 – Albert 2014-09-04 07:53:50

@DarkRanger多數民衆贊成在多數「額外的代碼」被添加到保持風格與你提供的圖形一致:) – haxxxton 2014-09-04 07:57:11

沒有得到與CSS

回答

相關問題