保持第一個和最後一個對齊的邊緣之間的元素間距相等

Question

我試圖在保持第一個和最後一個元素左右對齊的情況下，以相等的間距分佈元素。

我相信基於flex的佈局有一個簡單的解決方案，但我也想支持舊版瀏覽器。

我已經做了一個基於JS的解決方案，我將張貼，但隨時提出更好的解決方案&如果它可能通過只有CSS。

這裏是一個fiddle。

ul { 
 
    position: relative; 
 
    margin: 0; 
 
    font-size: 0; 
 
    padding: 0; 
 
    display: table; 
 
    width: 100%; 
 
    list-style: none; 
 
} 
 

 
ul:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 50%; 
 
    background: #000; 
 
    left: 0; 
 
    height: 1px; 
 
    width: 100%; 
 
    z-index: -1; 
 
} 
 

 
li { 
 
    display: table-cell; 
 
    text-align: center; 
 
} 
 

 
li:first-child { 
 
    text-align: left; 
 
} 
 

 
li:last-child { 
 
    text-align: right; 
 
} 
 

 
span { 
 
    font-family: sans-serif; 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    line-height: 1em; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 6px 9.34px; 
 
    border-radius: 999px; 
 
}

<ul> 
 
    <li><span>1</span></li> 
 
    <li><span>2</span></li> 
 
    <li><span>3</span></li> 
 
    <li><span>4</span></li> 
 
    <li><span>5</span></li> 
 
</ul>

Answer 1

我已經使用一種基於JavaScript解決方案做到這一點：

1. 計數項目的數目（5）
2. 不包含第一個和最後item（5-2 = 3）
3. 個計數它們（3）爲雙（3×2 = 6）
4. 將第一&最後背面（6 + 2 = 8）
5. 立即得到一個百分比除法（100/8 = 12.5％）
6. 然後給出基於百分比的總寬度的數量，以得到第一個和最後一個元素&其餘的兩倍（12.5 * 2 = 25％）。

[1 = 12.5％] [2 = 25％] [3 = 25％] [4 = 25％] [5 = 12.5％] = 100％

可以查看fiddle here。

<div class="wrap"> 
    <ul class="js-equal-dist"> 
    <li><span>1</span></li> 
    <li><span>2</span></li> 
    <li><span>3</span></li> 
    <li><span>4</span></li> 
    <li><span>5</span></li> 
    </ul> 
</div> 

CSS

.wrap{ 
    padding: 0 14px; 
} 
ul { 
    position: relative; 
    margin: 0; 
    font-size: 0; 
    padding: 0; 
    display: table; 
    width: 100%; 
    list-style: none; 
} 

ul:after { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: 50%; 
    background: #000; 
    left: 0; 
    height: 1px; 
    width: 100%; 
    z-index: -1; 
} 

li { 
    display: table-cell; 
    text-align: center; 
} 

li:first-child { 
    text-align: left; 
} 

li:last-child { 
    text-align: right; 
} 

li:first-child span { 
    transform: translateX(-50%); 
} 
li:last-child span { 
    transform: translateX(50%); 
} 

span { 
    font-family: sans-serif; 
    display: inline-block; 
    font-size: 15px; 
    line-height: 1em; 
    color: #fff; 
    background: #000; 
    padding: 6px 9.34px; 
    border-radius: 999px; 
} 

JS

// js-equal-dist 
    var totalWidth = $('.js-equal-dist').outerWidth(); 
    var itemsLength = $('.js-equal-dist li').length; 

    var percUnit = 100/(((itemsLength - 2) * 2) + 2); 
    percUnit = percUnit/100 * totalWidth; 

    $('.js-equal-dist li:not(:first-child):not(:last-child)').width(percUnit * 2); 
    $('.js-equal-dist li:first-child(), .js-equal-dist li:last-Child()').width(percUnit); 

注意，我不得不添加一個包裹分度的填充元素&的一半，經翻譯的第一和最後一個元素，以抵消50％爲了真正成爲中心。

Answer 2

這是一個基於flex的解決方案，用於通過搜索找到這篇文章的人。

請參閱下面的瀏覽器支持數據。

ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: relative; 
 
    margin: 0; 
 
    font-size: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    top: 50%; 
 
    background-color: #000; 
 
    height: 1px; 
 
    z-index: -1; 
 
} 
 

 
span { 
 
    font-family: sans-serif; 
 
    display: inline-block; 
 
    font-size: 15px; 
 
    line-height: 1em; 
 
    color: #fff; 
 
    background: #000; 
 
    padding: 6px 9.34px; 
 
    border-radius: 50%; 
 
}

<ul> 
 
    <li><span>1</span></li> 
 
    <li><span>2</span></li> 
 
    <li><span>3</span></li> 
 
    <li><span>4</span></li> 
 
    <li><span>5</span></li> 
 
</ul>

瀏覽器支持：Flexbox將被所有主流瀏覽器，支持except IE < 10。一些最新的瀏覽器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加前綴，請使用Autoprefixer。更多細節在this answer。

Answer 3

CSS

div { 
     width: 500px; 
     background-color: black; 
     font-size: 0; 
    } 

    span { 
     color: black; 
     width: 20px; 
     height: 20px; 
     display: inline-block; 
     background-color: red; 
     font-size: 15px; 
     margin: 0 calc((500px - 8 * 20px)/(8 + (8 - 2))); // 8 -> count of elements 
    } 

    span:first-child { 
     margin-left: 0; 
    } 

    span:last-child { 
     margin-right: 0; 
    } 

HTML

<div> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
<span>5</span> 
<span>6</span> 
<span>7</span> 
<span>8</span> 
</div> 

https://codepen.io/N11/pen/MvzeGM