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

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