使用百分比在導航中擬合列表項目

Question

正如您從下面看到的那樣，我無法安裝標籤5以及其他列表項目。我將每個的寬度設置爲20％，但不起作用。但是當我將它設置爲19％時，它工作正常。導致選項卡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盒模型。我沒有包含所有必需的前綴，因此它只能在較舊的瀏覽器上工作，以簡化答案。你可以找到關於該here的信息。

.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%時，邊距/間隙差異相等。

* Space between inline-block elements

.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/）之間的差距。