兩條線，底部和頂部，在H2的兩側

Question

所以我有這兩個h2元素。

XXXX YYYY

我想要實現這個在我的index.html：

---------- 
      XXXXXX 
       ---------- 

---------- 
      YYYYYY 
       ---------- 

兩行，在側面，頂部和底部。 HTML5和CSS。 我可以做第一h2，但是我不能使它爲第二個工作。它會得到所有的炒作。

.container2 { 
width:100%; 
} 

.column { 
width:33.33333333%; 
float:left; 
} 


<div class="container2" style="margin-top:200px"> 
<div class="column" style="border-top: 1px solid black"> 
    <h2><span style="font-size:0.5em;"></span></h2> 
</div> 
<div class="column"> 
    <h2><span style="font-size:1.5em;" onclick="openNavVentas()">Ventas</span></h2> 
</div> 
<div class="column" style="border-bottom: 1px solid black"> 
    <h2><span style="font-size:0.5em;"></span></h2> 
</div> 

Answer 1

像這樣的東西應該讓你開始我猜...

<style> 
    .test > * { width: 32%; display: inline-block; } 
    .test > hr:nth-child(1) { margin-top: -10px; margin-bottom: 10px; } 
    .test > hr:nth-child(3) { margin-top: 10px; margin-bottom: -10px; } 
</style> 
<div class="test"> 
    <hr /> 
    <h2>XXXXXX</h2> 
    <hr/> 
</div> 

例這裏... https://jsfiddle.net/rb9LsuLd/

Answer 2

我認爲你需要 「清除」彩車。

.container2 { 
    width:100%; 
    clear: both; 
} 

https://jsfiddle.net/dwv1qqch/

Answer 3

您可以通過使用CSS linear-gradient爲border-image達到這種效果。

工作實例：

h2 { 
 
text-align:center; 
 
margin-bottom: 48px; 
 
padding: 12px; 
 

 
border: 3px solid transparent; 
 
border-image: linear-gradient(
 
    to bottom right, 
 
    rgba(0,0,0,1) 19%, 
 
    rgba(0,0,0,0) 20%, 
 
    rgba(0,0,0,0) 80%, 
 
    rgba(0,0,0,1) 81%); 
 
border-image-slice: 1; 
 
border-left: none; 
 
border-right: none; 
 
}

<h2>First Heading 2</h2> 
 
<h2>Second Heading 2</h2>