使用百分比拟合导航系统中的列表项

Question

正如您从下面可以看到的，我很难将Tab 5与我的其他列表项目搭配在一起。我把每个宽度设为20%，但不起作用。但是当我把它设定为19%时，它就能正常工作了。是什么导致Tab 5移动到下一行？

​

.progress-region {
    max-width: 1040px;
    margin: 0 auto;
    border: 2px solid;
}

.progress-nav {
    position: relative;
    padding-top: 30px
}
.progress-nav .step-labels {
    margin: 0 0 20px
}

.progress-nav .step-labels.items-5 .item {
    width: 20%
}

.progress-nav .step-labels .item {
    box-sizing: border-box;
    color: #aaa;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.progress-nav .progress-bar {
    height: 3px;
    background: #f5f5f5

}

.progress-nav .progress-bar .inner-bar {
    background: #3381d0;
    height: 100%;
    width: 0
}

<link href="http://jsfiddle.net/css/normalize.css" rel="stylesheet"/>
<section class="progress-region">
    <div class="progress-nav">
        <div class="back-arrow" style="display: none;"></div>
        <ul class="step-labels items-5">
            <li class="item" data-index="0">Tab 1</li>
            <li class="item active" data-index="1">Tab 2</li>
            <li class="item" data-index="2">Tab 3</li>
            <li class="item" data-index="3">Tab 4</li>
            <li class="item" data-index="4">Tab 5</li>
        </ul>
        <div class="progress-bar">
            <div class="inner-bar" style="width: 50%;"></div>
        </div>
    </div>
</section>

​

Answer 1

另一种选择，您可以使用flex模型。我还没有包括它在旧浏览器上工作所需的所有前缀，这仅仅是为了压缩答案。您可以找到有关该这里的信息。

​

.progress-region {
  max-width: 1040px;
  margin: 0 auto;
  border: 2px solid;
}
.progress-nav {
  position: relative;
  padding-top: 30px
}
.progress-nav .step-labels {
  margin: 0 0 20px;
  display: flex;
}
.progress-nav .step-labels.items-5 .item {
  flex: 1;
}
.progress-nav .step-labels .item {
  box-sizing: border-box;
  color: #aaa;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear
}
.progress-nav .progress-bar {
  height: 3px;
  background: #f5f5f5
}
.progress-nav .progress-bar .inner-bar {
  background: #3381d0;
  height: 100%;
  width: 0
}

<link href="http://jsfiddle.net/css/normalize.css" rel="stylesheet" />
<section class="progress-region">
  <div class="progress-nav">
    <div class="back-arrow" style="display: none;"></div>
    <ul class="step-labels items-5">
      <li class="item" data-index="0">Tab 1</li>
      <li class="item active" data-index="1">Tab 2</li>
      <li class="item" data-index="2">Tab 3</li>
      <li class="item" data-index="3">Tab 4</li>
      <li class="item" data-index="4">Tab 5</li>
    </ul>
    <div class="progress-bar">
      <div class="inner-bar" style="width: 50%;"></div>
    </div>
  </div>
</section>

​

Answer 2

造成此问题的原因是列表项上的display: inline-block。默认情况下，内联块元素在它们之间生成空间*。当您将20%宽度缩小到19%时，边距/间隙差是相等的。

*内联块元素之间的空间

​

.progress-region {
    max-width: 1040px;
    margin: 0 auto;
    border: 2px solid;
}

.progress-nav {
    position: relative;
    padding-top: 30px
}
.progress-nav .step-labels {
    margin: 0 0 20px
}

.progress-nav .step-labels.items-5 .item {
    width: 19%
}

.progress-nav .step-labels .item {
    box-sizing: border-box;
    color: #aaa;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear
}

.progress-nav .progress-bar {
    height: 3px;
    background: #f5f5f5

}

.progress-nav .progress-bar .inner-bar {
    background: #3381d0;
    height: 100%;
    width: 0
}

<link href="http://jsfiddle.net/css/normalize.css" rel="stylesheet"/>
<section class="progress-region">
    <div class="progress-nav">
        <div class="back-arrow" style="display: none;"></div>
        <ul class="step-labels items-5">
            <li class="item" data-index="0">Tab 1</li>
            <li class="item active" data-index="1">Tab 2</li>
            <li class="item" data-index="2">Tab 3</li>
            <li class="item" data-index="3">Tab 4</li>
            <li class="item" data-index="4">Tab 5</li>
        </ul>
        <div class="progress-bar">
            <div class="inner-bar" style="width: 50%;"></div>
        </div>
    </div>
</section>

​

Answer 3

在内联块(https://css-tricks.com/fighting-the-space-between-inline-block-elements/)之间有一个缺口。