Question

当需要在下面的行连接的圆形圆圈中写下无点ol列表时遇到困难，如下所示：

我试图用伪元素制作它，但总是惊呆了许多困难，尤其是对齐。

尽可能简单地编写它并尝试使用flex的想法。或者，至少我想听一下只有display：table。

才能进行alighnment的观点

感谢。

代码低于

HTML

<ol>
  <li>
    <div class="number-round fw-semi-bold">1</div>
    <p>Lorem upsum1</p>
  </li>
  <li>
    <div class="number-round fw-semi-bold">1</div>
    <p>Lorem upsum imsum huipsum. Lorem upsum imsum huipsum. </br> Lorem upsum imsum huipsum.</p>
  </li>
  <li>
    <div class="number-round fw-semi-bold">1</div>
    <p>Lorem upsum</p>
  </li>
</ol>

SCSS

.ol {
  list-style-type: none;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: stretch;

  > li {
    display: flex;
    height: 3rem;
    align-items: center;
  }

  &:before {
    position: absolute;
    top: 10vw;
    bottom: 10vw;
    left: 75px;
    width: 1px;
    content: " ";
    margin-left: -4px;
    background-color: #111;
    z-index: -1;
  }

  .number-round {
    vertical-align: middle;
    // display: table-cell;
    font-size: 90%;
    z-index: 100;
    text-align: center;

    & :before {
      border: 1px solid #111;
      border-radius: 50%;
      background: black;
      display: inline-block;
      width: 28px;
      height: 28px;
      margin: 0 14px 0 18px;
      padding-top: 1px;
      font-size: 13px;
    }
  }
}

Answer 1

花了:before进行了一些游戏（你在那里正确！），但我开始简化你的HTML并删除你的CSS。

看起来应该是这样的：

我最终得到了这个HTML：

<div id="wrapper">
    <ol>
        <li>
            <p>Lorem upsum1</p>
        </li>
        <li>
            <p>Lorem upsum imsum huipsum. Lorem upsum imsum huipsum. Lorem upsum imsum huipsum.</p>
        </li>
        <li>
            <p>Lorem upsum</p>
        </li>
    </ol>
</div>

这个CSS（我不知道scss，所以你必须在使用之前翻译它，我猜）：

html, body {
    height: 100%;
    width: 100%;
}
#wrapper {
    height: 300px;
    overflow: hidden;
}

ol li {
    height: 60px;
}

ol li p {
    padding-left: 20px;
    vertical-align: middle;
    display: inline-block;
}

ol:before {
    content:"";
    width: 1px;
    height: 120px;
    margin-top: 20px;
    background: black;
    position:absolute;
    left:33px;
    z-index: -2;
}
ol li:before {
    content:"";
    width: 26px;
    height: 26px;
    border: 1px solid black;
    background: #fff;
    position: absolute;
    left: 19px;
    margin-top: 9px;
    border-radius: 50%;
    z-index: -1;
}

ol li:nth-child(2) {
    margin-top: -14px;
}

ol li:nth-child(2):before {
    margin-top: 18px;
}

Working example

它不是很敏感，因为如果它超过1行，你必须用margin-top定位圆圈，但我很确定你可以用它作为你最终解决方案的垫脚石。

您还可以在几周前查看my own question，我在其中创建两个列表来解决它。如果答案不充分，答案可能会有用。

自定义ol列表CSS样式与flex flexighing

1 个答案: