0

我有以下 CSS 结构，这有点复杂。完整的代码放在这个 JSFiddle 中，我正在努力解决我需要在那里实现的最后一个想法。

在水平线（与圆圈一致）之间，我需要将附加线旋转 90 度并在其前面放置一些文本。它应该看起来像这张图片，我在其中添加了红色的缺失元素。

我已经尝试从上面的链接中实现类似的东西，但它没有按预期工作。请注意，HTML 中也有一些内联 CSS，它们本质上是动态的，并且是在运行时生成的。

作为说明，我尝试添加这个新的 HTML 元素，但我宁愿不使用内联样式来添加这些行（如果可能）。这是新添加元素的 CSS 和 HTML：

.chart .left-line {
  transform: rotate(-90deg);
  display: flex;
  align-items: center;
  position: absolute;
  right: -257px;
  width: 530px;
  z-index: 10;
  top: 245px;
}

.chart .left-line hr {
  width: 100%;
  background: #1d2026;
  opacity: 0.25;
}

.chart .left-line-container {
  width: 100%;
  font-family: Open Sans;
  font-size: 12px;
  color: #1d2026;
  font-weight: 700;
  margin: 0 16px;
  -webkit-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
<div class="left-line-container" style="top: 135px;">
  <hr class="left-line-hr"> 12.34
</div>

4

2 回答 2

0

我希望这会有所帮助：

.flex-parent {
  display: flex;
  width: 100%;
  height: 180px;
  align-items: center;
  padding: 50px 0;
  transform: rotate(-90deg);
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #e3e3e3;
  border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 150%;
color: #777777;
	letter-spacing: 3px;
}
 <div class="flex-parent">
        <div class="flex-child-edge"></div>
        <div class="flex-child-text">text here</div>
        <div class="flex-child-edge"></div>
      </div>

于 2018-09-24T14:30:45.323 回答
0

您可以使用以下代码来解决您的问题：

hr{
    width: 1px;
    height: 100%
}
于 2018-09-24T14:55:54.080 回答