動的な幅の項目を完全に中心とする水平スクロール可能リスト

Question

私は、メインの親（ウィンドウまたはボディ）に関してアイテムが中央に配置されるように、水平方向のリストを中央に配置しようとしています。私はどのような種類とどのくらいのアイテムが私はそのリストに生成されますかわからないので、私はそれらのすべてを参照することができますので、幅とリストがスクロール可能な動的にする必要があります。

これまでの試みはうまくいきました。私は、中心にない動的な幅の項目を持つ中心リストと、幅が固定された項目を持つ完全に中心のスクロール可能なリストです。

ul { 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

li { 
    display: inline-block; 
} 

を次にセンタリングを<div>に<ul>ラッピング、及び代わり<ul>の<ul>が<li>スクロール<div>スクロールすることによって行われる。

核となるアイデアは、基本的に使用することによって達成されます。私は私のリストがで余分なスペースを持ってしたくないとして：それは考え方が少しひねりを加えたtranslateX(-50%)を使用することで、幅を中心とする項目については<ul>

div { 
    width: 100%; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

ul { 
    margin: 0 50%; 
} 

li { 
    display: inline-block; 
} 

に％ベースの余白を追加することができますスクロールの最後に、最後のアイテムを絶対的な位置に配置してフローから最後のアイテムを削除します。そのように、幅はアイテムの幅からアイテムを差し引いたもののように見えます。

ul { 
    position: relative; 
    margin: 0 50%; 
} 

li { 
    display: inline-block; 
    width: some_number; 
    transform: translateX(-50%); 
} 

li:last-child { 
    position: absolute; 
    left: 100%; 
} 

しかし、どのようにそのように幅を設定せずに、それを維持するためには、私には謎です。
そこに任意のアイデア？

は、ここでCSSのセクションでいくつかのコメントと私のバイオリンです：https://jsfiddle.net/11gkrju0/は

私はそれがスタイリングの問題だけであるようないは全くそのためにJavaScriptを使用したいのですが、DOMをいじりすることです完全に実行可能なオプションです。

Answer 1

[OK]を、すべての読書のための

おかげで、それは少しトリッキーですので。解決されたフィドルは、私がここで説明するコメントもあります。 https://jsfiddle.net/11gkrju0/7/

最初に気付くべきことは、を私の<li>に追加して、ある時点で縦のズレがないことを確認してください。

次に。非中心のリストについては、

境界がキャッチするのは簡単です：中心リストについて

+-----+---+---------+ 
| A | B | C | 
+-----+---+---------+ 
^     ^
a     b 

、彼らは少しの変更：

+-----+---+---------+ 
| A | B | C | 
+-----+---+---------+ 
^^  ^^
a c   d b 

スクロール右を作るために、私たちのようにする必要があり<ul>の幅をA-> BからC-> Dに変更します。その幅は子供の幅によって動的に計算されるので、子供を変更する必要があります。

最初と最後の子のみが変更されることがわかります。テキストは各子の幅を定義するので、widthプロパティを変更することはできませんが、font-size、paddingという2つの定義済みの値をもっと簡単に2つに分けることができます。

li { 
    font-size: 12px; 
    padding: 0 50px; 
} 

li:first-child, li-last-child { 
    font-size: 6px; 
    padding: 0 25px; 
} 

今リストは、より

+---+---+-----+ 
| a | B | c | 
+---+---+-----+ 
^^ ^^ 
a c  d b 

のように見えるかもしれません。しかし、問題は、テキストとパディングが今より小さくしていることです。私たちができることはcontentプロパティを与えるためにliにテキスト属性を追加する少しのトレードで実際のボタンを:afterに代理することです。 DOMでそれと

<li text='A'>A</li> 
<li text='B'>B</li> 
<li text='C'>C</li> 

、私たちは本当のように見える偽のボタン（本物を隠し、言うまでもありません...）

li { 
    position: relative; 
    background: transparent; 
    color: transparent; 
} 

li:after { 
    display: block; 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    content: attr(text); 
    color: #000; 
} 

を作成するために、CSSのようなものを書くことができます

ほぼそこに、ほとんどそこに...

最初と最後の子供が変更されているので、彼らの擬似子も...副作用は、幅が6pxフォントサイズのために計算されるということです。したがって、必要な幅を2倍に戻し、継承を防ぐためにfont-sizeをリセットする必要があります。

li:first-child:after, #d li:last-child:after { 
    font-size: 12px; 
    width: 200%; 
} 

最後に（yay）、最初の要素を幅の半分にして2番目の要素との衝突を防ぎます。

li:first-child:after { 
    left: -100%; 
} 

我々としてもtransform: translateX(-50%);を使用することもできましたが、その上の計算の他の層を適用する必要はありませんので、我々はすでに絶対値を操作しています。

誰かを助けることを願っています。