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

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