先頭と末尾を反対の辺に揃えたまま要素間の等間隔を設定する

Question

最初と最後の項目を左右に揃えたまま、等間隔の要素を配分しようとしています。

フレックスベースのレイアウトには簡単な解決策があると思いますが、古いブラウザもサポートしたいと思います。

私はすでに投稿している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. 除く最初と最後のアイテムの数をカウント項目（5-2 = 3）
3. のカウントそれらは、（3）二重（3×2 = 6）
4. は、最後のバック最初&を追加（6 + 2 = 8）
5. すぐパーセンテージ分割を取得し、（100/8 = 12.5％）
6. 次に、最初の要素と最後の要素の合計幅の割合に基づいて、&の残りの部分が2回（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> 

私は要素&の半分の50％を相殺するために、最初と最後の要素を翻訳することをパディングとラップの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); 

注意本当に中心になるようにする

Answer 2

ここでは、検索を介してこの投稿を見つける人々のためのフレックスベースのソリューションです。

下記のブラウザサポートデータを参照してください。

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>

ブラウザのサポート：フレキシボックスがすべての主要なブラウザ、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