添加内联水平线

我有一个类似仪表板视图的交通灯，我必须为我的一个页面提供交通灯。但我不能在多个调整的情况下使横线运作。添加内联水平线

我想要什么：对我有什么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

添加内联水平线

回答

相关问题