使用 flex 对齐的自定义 ol-list CSS 样式答案

【问题标题】：Custom ol-list CSS styling with flex alighning使用 flex 对齐的自定义 ol-list CSS 样式
【发布时间】：2015-10-07 19:48:51
【问题描述】：

惊呆了，当需要在与下面的线相连的圆形圆圈中编写无点 ol 列表时，像这样：

我尝试使用伪元素来制作它，但总是对许多困难感到震惊，尤其是对齐。

尽可能简单地编写它并尝试使用 flex 的想法。或者，至少我想听听只有 display:table 才能进行对齐的意见。

谢谢。

代码如下

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;
    }
  }
}

【问题讨论】：

首先，删除.ol。您正在尝试直接定位 ol，而不是 class="ol"。

标签： css html html-lists vertical-alignment flexbox

【解决方案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，我通过创建两个列表来解决它。如果我的回答不够充分，这些答案可能会有用。

【讨论】：