Question

我有一个像仪表板视图的红绿灯，我必须为我的一个页面提出。但是，尽管进行了多次调整，我仍然不能让水平线工作。

我想要的是什么：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;
}

Answer 1

我为你做了这个：JsFiddle

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

Answer 2

为什么你不使用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>

Answer 3

你可以用一点:before魔法来做到这一点。

向包含bubble div的div添加一个类，比如说'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

Answer 4

如果您将position: relative添加到.bubble，则可以这种方式实施该行：

.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。

添加内联水平线

4 个答案: