添加內聯水平線

我有一個類似儀表板視圖的交通燈，我必須爲我的一個頁面提供交通燈。但我不能在多個調整的情況下使橫線運作。添加內聯水平線

我想要什麼：對我有什麼Want

小提琴：https://jsfiddle.net/gunnersfan/dx19y3f4/

CSS：

.bubble { 
    height: 30px; 
    width: 30px; 
    color: white; 
    display: inline-block; 
    text-align: center; 
    vertical-align: center; 
    border-radius: 50%; 
    margin-right: 50px; 
    margin-left: 50px; 
    font-size: 90%; 
} 
.red-bg { 
    background: red; 
} 
.green-bg { 
    background: green; 
} 
.blue-bg { 
    background: blue; 
} 

.inline-div { 
    display: inline; 
    font-size: 75%; 
    font-family: verdana; 
    margin-left: 50px; 
    margin-right: 50px; 
}

來源

2016-10-12 gunnersfan

[表單元格之間的div CSS線（可能的重複http://stackoverflow.com/questions/25460005/css-line -this-table-cell-div） – jcaron

只是一個與你的問題無關的提示：使用'line-height'等於'height'來使你的數字在圓圈中垂直居中。在你的情況如此：'line-height：30px;' – fremail

謝謝@fremail，這是一個有用的提示。 – gunnersfan

我做這個給你：JsFiddle

.bubbles .line { 
    position: absolute; 
    top: 50%; 
    left: 50px; 
    right: 50px; 
    border-top: 1px solid black; 
    z-index: -1; 
}

來源

2016-10-12 21:26:45 debute

這對我來說非常合適，謝謝！ – gunnersfan

@ gunnersfan yea，歡迎您:) – debute

你可以用一點神奇:before做到這一點。

類添加到包您bubblediv S上的格，說'outer-bubble'並添加以下CSS：

.outer-bubble { 
    position: relative; 
} 

.outer-bubble:before { 
    position: absolute; 
    top: 50%; 
    left: 50px; 
    height: 1px; 
    width: 290px; 
    background: black; 
    content: ''; 
    z-index: -1; 
}

Fiddle

來源

2016-10-12 21:26:15 putvande

這對我來說也很完美，謝謝！接受@debute的答案，因爲它是第一個。 – gunnersfan

如果您將position: relative添加到.bubble，則可以實施lin E在此方式：

.bubble:not(:nth-last-of-type(1)):before { 
    display: block; 
    content: ''; 
    width: 140px; 
    height: 2px; 
    position: absolute; 
    top: calc(50% - 1px); 
    left: 50%; 
    background-color: #000; 
    z-index: -1; 
}

所以，您要添加:before僞元素給每個.bubble但最後。

這種方法的好處是您不必添加額外的標記。這裏是JsFiddle。

來源

2016-10-12 21:28:07

爲什麼不使用HTML Canvas？但如果你真的想使用CSS，這是一個簡短的方式：

.shape1 { 
    height: 1px; 
    width: 104px; 
    border-bottom: 1px solid ; 
    border-right: 1px solid ; 
    margin-left: 80px; 
    margin-right: 80px; 
    margin-top: 15px; 
    position:absolute; 
} 
.shape2 { 
    height: 1px; 
    width: 104px; 
    border-bottom: 1px solid ; 
    border-right: 1px solid ; 
    margin-left: 214px; 
    margin-right: 80px; 
    margin-top: 15px; 
    position:absolute; 
} 

<body> 
    <div> 
     <div class="inline-div"> 
      Title1 
     </div> 
     <div class="inline-div"> 
      Title2 
     </div> 
     <div class="inline-div"> 
      Title3 
     </div> 

    </div> 
    <div> 
    <div class="shape1"></div> 
    <div class="shape2"></div> 
     <div class="bubble red-bg"> 
     5 
     </div> 
     <div class="bubble green-bg"> 
     66 
     </div> 

     <div class="bubble blue-bg"> 
     777 
     </div> 

    </div> 
</body>

來源

2016-10-12 21:36:46

添加內聯水平線

回答

相關問題