Question

我在页面上创建了寻呼机（可能是我的名字错误），我遇到了问题。我为每个寻呼机的步骤使用自举式预先计算的宽度来提供均匀的宽度。但问题是每个点在每个步骤div的中心对齐，包括第一个和最后一个元素。但这会导致出现在第一个和最后一个元素的空白区域。

我能找到的唯一解决方案是为寻呼机容器设置负边距并使左右点适合页面边框，但该方法存在问题：

我需要手动为每个步骤设置保证金值
额外的保证金导致不受欢迎的水平滚动

我该如何解决这个问题？

这是寻呼机结构：

<div class="pager-bar row pb-6">
   <div class="pb-step pb-complete">
       <div class="pb-step-label">1</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
   <div class="pb-step pb-complete pb-active">
       <div class="pb-step-label">2</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
   <div class="pb-step pb-disabled">
       <div class="pb-step-label">3</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
   <div class="pb-step pb-disabled">
       <div class="pb-step-label">4</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
   <div class="pb-step pb-disabled">
       <div class="pb-step-label">5</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
   <div class="pb-step pb-disabled">
       <div class="pb-step-label">6</div>
       <div class="pb-progress">
           <div class="pb-progress-bar"></div>
       </div>
       <span class="pb-dot"></span></div>
</div>

样式（SCSS）：

@import "../colors";

$pb-margin-6: -130px;
$pb-margin-3: -302px;

.pager-bar {
 height: 100px;
 padding-top: 45px;

 &.row {
   > .pb-step {
     float: left;
     position: relative;
     min-height: 1px;
   }

   &.pb-6 {
     margin-left: $pb-margin-6;
     margin-right: $pb-margin-6;

     > .pb-step {
       width: (100% / 6);
     }
   }

   &.pb-3 {
     margin-left: $pb-margin-3;
     margin-right: $pb-margin-3;

     > .pb-step {
       width: (100% / 3);
     }
   }
 }

 > .pb-step {
   padding: 0;

   .pb-step-label {
     color: $coral;
     text-align: center;
     font-weight: 600;
     font-size: 24px;
     margin-bottom: 5px;
   }

   > .pb-dot {
     position: absolute;
     width: 10px;
     height: 10px;
     display: block;
     background: $coral;
     top: 55px;
     left: 50%;
     margin-top: -15px;
     margin-left: -5px;
     border-radius: 50%;
     cursor: pointer;
   }

   > .pb-progress {
     position: relative;
     height: 2px;
     margin: 10px 0;

     > .pb-progress-bar {
       width: 0;
       height: 100%;
       background: $coral;
     }
   }

   &.pb-complete {
     > .pb-progress > .pb-progress-bar {
       width: 100%;
     }
   }

   &.pb-active {
     > .pb-progress > .pb-progress-bar {
       width: 50%;
     }

     &:first-of-type {
       > .pb-progress > .pb-progress-bar {
         width: 0;
       }
     }

     > .pb-step-label {
       color: $coral;
       font-weight: 600;
     }
   }

   &:first-child.pb-current > .pb-progress > .pb-progress-bar {
     width: 0;
   }

   &:last-child.pb-current > .pb-progress > .pb-progress-bar {
     width: 100%;
   }

   &.pb-disabled {
     .pb-dot {
       background-color: #ddd;
       cursor: default;
       &:after {
         opacity: 0;
       }
     }

     .pb-step-label {
       color: $warm-grey;
       font-weight: 300;
     }
   }

   &:first-child > .pb-progress {
     left: 50%;
     width: 50%;
   }

   &:last-child > .pb-progress {
     width: 50%;
   }

   .pb-progress {
     background-color: #ddd;
   }
 }
}

Answer 1

如果您使用flexbox布局并将pb-progress移出pb-step，则可以简化大量HTML和CSS：

http://codepen.io/Sphinxxxx/pen/RoMYBQ?editors=1100

HTML

<div class="pager-bar">

    <div class="pb-step">
        <div class="pb-step-label">1</div>
        <span class="pb-dot"></span>
    </div>
    <div class="pb-progress"></div>

    <div class="pb-step pb-active">
        <div class="pb-step-label">2</div>
        <span class="pb-dot"></span>
    </div>
    <div class="pb-progress"></div>

    <div class="pb-step">
        <div class="pb-step-label">3</div>
        <span class="pb-dot"></span>
    </div>
    <div class="pb-progress"></div>

    ...

</div>

SCSS

$bullet-size: 10px;
$color-active: coral;
$color-disabled: gainsboro;

.pager-bar {
    display: flex;
    align-items: flex-end;

    .pb-step {
        flex: 0 0 $bullet-size;
        position: relative;
        text-align: center;
        padding-bottom: $bullet-size;

        color: $color-active;
        &.pb-active ~ .pb-step {
            color: $color-disabled;
        }

        .pb-dot {
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            width: $bullet-size;
            height: $bullet-size;
            margin-left: -$bullet-size/2;
            border-radius: 100%;
            background: currentColor;
        }
    }

    .pb-progress {
        flex: 1 1 auto;
        height: 2px;
        margin: 0 -$bullet-size;
        margin-bottom: calc( #{$bullet-size/2} - 1px );

        background: $color-active;
        @at-root .pb-step.pb-active ~ .pb-progress {
            background: $color-disabled;
        }

        &:last-child {
            display: none;
        }
    }
}

如何避免元素的负边距和拟合宽度？

1 个答案: