創建垂直和水平「刪除線」

我想在我的網站上的按鈕之間創建一個「間隔」，並希望它是單詞或垂直線，集中在單詞上下。我試圖創建垂直和水平「刪除線」

HTML

<div class="footer-btn-wrap"> 
    <div class="decor"><a href="... </div> 

    <div class="or"> 
     <div class="above"></div> 
     <h4>or</h4> 
     <div class="below"></div> 
    </div> 

    <div class="decor"><a href="... </div> 
</div>

CSS

.or { // name of containing div} 
.or .above { border: 1px left solid } 
.or .below { border: 1px left solid }

，但他們無法進入中心。

在視覺上，我試圖完成的按鈕

enter image description here

之間以下

其次，當移動我想要的線要經過水平（該按鈕會被堆疊，它會在兩者之間）

來源

2015-07-05 user3550879

他們需要是邊界嗎？你可以使用只有幾個像素寬的div，並給它一個背景顏色。

http://jsfiddle.net/puqgko63/

<div class="footer-btn-wrap"> 
    <div class="decor"> 
     <a href="..."></a> 
    </div> 

    <div class="or"> 
     <div class="above"></div> 
     <h4>or</h4> 
     <div class="below"></div> 
    </div> 

    <div class="or"> 
     <h4>or</h4> 
     <div class="below"></div> 
    </div> 

    <div class="decor"> 
     <a href="..."></a> 
    </div> 
</div>

.footer-btn-wrap 
{ 
    width: 120px; 
    background-color: #aaccee; 
    color: #abddf9; 
    font-family: Calibri; 
} 

.or h4 
{ 
    font-size: 24pt; 
    text-decoration: none; 
    display: block; 
    width: 50px; 
    margin: auto; 
    text-align: center; 
} 

.or .above, .or .below 
{ 
    height: 50px; 
    width: 2px; 
    background-color: #abddf9; 
    margin: auto; 
}

enter image description here

要使其對於移動版本爲水平，可以將元素更改爲內嵌塊，然後交換隔離區div的寬度和高度。

（以下仍這個例子需要一些調整，但它應該給你如何做到這一點的想法）

http://jsfiddle.net/yf6zvq7z/

.footer-btn-wrap 
{ 
    background-color: #61b8df; 
    color: #abddf9; 
    font-family: Calibri; 
    display: inline-block; 
} 

.or 
{ 
    display:inline-block; 
    height: 50px; 
} 

.or h4 
{ 
    font-size: 24pt; 
    text-decoration: none; 
    display: inline-block; 
    margin: 0 20px; 

} 

.or .above, .or .below 
{ 
    display:inline-block; 
    height: 2px; 
    width: 50px; 
    background-color: #abddf9; 
    margin: auto; 
    vertical-align: middle; 
}

enter image description here

來源

2015-07-05 20:36:25 Pikamander2

你可以使用僞元素。

HTML：

<div class="or"> 
    <h4>or</h4> 
</div>

在CSS：

.or { 
    padding: 10px 50px; 
    display: block; 
    position: relative; 
} 

.or:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 55px; 
    height: 30px; 
    border-left: 1px solid #000; 
} 

.or:after { 
    content: ''; 
    position: absolute; 
    top: 55px; 
    left: 55px; 
    height: 30px; 
    border-left: 1px solid #000; 
}

這是一個基本的小提琴：https://jsfiddle.net/f1u1tsjk/1/

顯然，你需要自定義每個圖像的CSS。

下面是關於如何使用僞元素的好文章：https://css-tricks.com/pseudo-element-roundup/

來源

2015-07-05 20:37:18 s0rfi949

創建垂直和水平「刪除線」

回答

相關問題