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

Question

我正在我的页面上创建寻呼机(也许我的名字有误)小部件，但我遇到了问题。 我为每个寻呼机的步骤使用 Bootstrap 样式的预计算宽度来提供统一的宽度。但问题是每个点都在每个步骤 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;
        }
    }
}