tags: [css]

    QQ20200106-135245@2x.png

    1. 描述

    如上图所示，实现一个步骤线的布局（不止两个步骤），表示步骤的盒子长度固定不变，无论描述文字的多少，上方表示步骤的盒子必须与下方的描述文字的中心线对齐。

    1. 实现
    1. <div class="step">
    2.   <div class="step-item">
    3.     <div class="num">1</div>
    4.     <div class="desc-wrapper">
    5.       <div class="desc">步骤一</div>
    6.     </div>
    7.   </div>
    8.   <div class="step-item">
    9.     <div class="num">2</div>
    10.     <div class="desc-wrapper">
    11.       <div class="desc">步骤二描述描述描述</div>
    12.     </div>
    13.   </div>
    14. </div>
    • 方式一

    将 desc-wrapper 放置在 .num div 的中心点位置，然后将 desc 向左平移文字长度的 50%;
    注: 平移时需要将 desc 脱离文档流

    image.png

    image.png

    1. :root {
    2.   --height: 20px;
    3. }
    4. .step {
    5.   display: flex;
    6. }
    7. .num {
    8.   border: 1px solid;
    9.   height: var(--height);
    10.   text-align: center;
    11.   line-height: var(--height);
    12.   width: 72px;
    13. }
    14. .step-item {
    15.    position: relative;
    16.    display: flex;
    17.    flex-direction: column;
    18.    align-items: center;
    19. }
    20. .step-item:not(:last-child)::after {
    21.   position: absolute;
    22.   top: calc((var(--height) + 1px * 2 - 1px) / 2);
    23.   left: 100%;
    24.   content: '';
    25.   width: 120px;
    26.   height: 1px;
    27.   background: #000;
    28.   display: block;
    29. }
    30. .step-item:not(:last-child) {
    31.   margin-right: 120px;
    32. }
    33. .desc {
    34.   position: absolute;
    35.   white-space: nowrap;
    36.   transform: translateX(-50%);
    37. }
    • 方式二

    使用 flex 或者 grid 布局设置 desc-wrapper 子元素居中

    1. :root {
    2.   --height: 20px;
    3. }
    4. .step {
    5.   display: flex;
    6. }
    7. .num {
    8.   border: 1px solid;
    9.   height: var(--height);
    10.   text-align: center;
    11.   line-height: var(--height)
    12. }
    13. .step-item {
    14.   width: 72px;
    15.   position: relative;
    16. }
    17. .step-item:not(:last-child)::after {
    18.   position: absolute;
    19.   top: calc((var(--height) + 1px * 2 - 1px) / 2);
    20.   left: 100%;
    21.   content: '';
    22.   width: 120px;
    23.   height: 1px;
    24.   background: #000;
    25.   display: block;
    26. }
    27. .step-item:not(:last-child) {
    28.   margin-right: 120px;
    29. }
    30. .desc-wrapper {
    31.   display: flex; // 或 grid
    32.   justify-content: center;
    33. }
    34. .desc {
    35.   white-space: nowrap;
    36. }

    • 效果

      image.png