在兩個小時之間放置一個符號

-2

我想在兩個小時標籤之間放置一個方形符號來創建一個分隔符，我希望這個正方形位於這兩行之間。通過這個代碼，正方形的位置低於hr標籤，而不是在它們中間。在兩個小時之間放置一個符號

這是HTML：

<div class="separator"> 
     <hr width='150' align="left"> 
      <span style="color: #fff;">&#9632;</span> 
     <hr width='150' align="right"> 
    </div>

這裏是CSS：

separator { 
     margin: 5% 0; 
    } 

    hr { 
     border: none; 
     height: 2px; 
     background: #fff; 
     display: inline-block; 
    }

來源

2017-11-25 Catalin Sandu

像這樣的事情應該通過利用flexbox做的工作：

CSS

.divider { 
    display: flex; 
    width: 100%; 
    align-items: center; 
    justify-content: center; 
} 

.divider hr { 
    flex: 1 1 0; 
} 

.divider .square { 
    width: 15px; 
    height: 15px; 
    background-color: black; 
}

HTML

<div class="divider"> 
    <hr /> 
    <div class="square"></div> 
    <hr /> 
</div>

來源

2017-11-25 19:55:26 treyhakanson

好它幫助。但我忘了提及我不希望2小時標籤具有它們放置的div的全部寬度。我希望它們的寬度分別爲每個25％ –

這是任意的。只需將整個東西放在另一個不是全寬的div中，或將分隔線的寬度從100％改爲所需的值即可。 – treyhakanson

它完美地起作用。非常感謝你！ –

使用漂浮在小時

HTML代碼

<div class="separator"> 
      <hr width='150' align="left" style="float: left;"> 
       <span style="color: #fff;">&#9632;</span> 
      <hr width='150' align="right"> 
     </div>

來源

2017-11-25 20:04:48

在兩個小時之間放置一個符號

回答

相關問題