Question

我具有以下CSS结构，这有点复杂。完整的代码放在in the this JSFiddle中，我在最后需要思考的问题上苦苦挣扎。

在水平线（与圆圈对齐）之间，我需要将其他线旋转90度，并在其前面添加一些文本。它应该看起来像in this picture，在其中我用红色添加了缺失的元素。

我已经尝试实现上述链接中的小提琴，但是它没有按预期工作。请注意，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>

Answer 1

我希望这会有所帮助：

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

Answer 2

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

hr{
    width: 1px;
    height: 100%
}

如何在CSS中将hr线旋转90度并在其前面放置文本？

2 个答案: