HTML和CSS右邊的文本在左邊

-4

如何在HTML和CSS中創建以下內容？HTML和CSS右邊的文本在左邊

Some Text -------------------------------------------- -------------

線應牢固，無虛線

感謝

來源

2017-03-31 Edgar Barber

你有什麼已經嘗試過？你的標記是什麼？線路是否應占用剩餘的所有空間？沒有足夠的信息來解答這個問題。 – BenM

請遵循堆棧溢出指南「如何寫出一個好問題」。 https://stackoverflow.com/help/how-to-ask –

你可以做到這一點使用Flexbox的是這樣的：

.text { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
    
 
.text::after { 
 
    content: ""; 
 
    -webkit-box-flex: 1; 
 
      -ms-flex: 1; 
 
       flex: 1; 
 
    -ms-flex-item-align: center; 
 
    -ms-grid-row-align: center; 
 
      align-self: center; 
 

 
    margin-left: 8px; /*space before line*/ 
 
    height: 2px;  /*line thickness*/ 
 
    background: #333; /*line color*/ 
 
}

<div class="text">Some Text</div>

來源

2017-03-31 19:47:50 bprocell

我不是在這裏試圖判斷你的答案，但我認爲這不是一個好主意，使用一些CSS功能與低瀏覽器支持，如「flex 「和僞，而問題可以用更好的瀏覽器支持的另一種CSS技術來解決。 –

感謝您的評論。我主要同意你的觀點，但正如你所指出的那樣，公平地說，在這個問題上沒有太多的信息要繼續。我不同意的唯一觀點就是支持。 2017年Flexbox和僞元素都不能說是「低」支持_（來自caniuse.com：[flexbox]（http://caniuse.com/#search=flexbox），[pseudo elements]（http：// caniuse.com/#search=pseudo-elements))_。自從去年年初以來，我一直在使用這兩種產品，並且只需要IE11的後備。話雖如此，儘管我的答案几乎適用於所有瀏覽器，但我仍然同意你的看法。 – bprocell

你可以達到你想要用下面的代碼片段是什麼：

<style> 
    .inline-hr { 
     display: inline-block; 
     width: 50px; 
     vertical-align: middle; 
    } 
</style> 
Some text <hr class="inline-hr"/>

然後，您可以通過調整樣式中的寬度來使線條儘可能地寬。

來源

2017-03-31 18:50:41

HTML和CSS右邊的文本在左邊

回答

相關問題