エレメント幅<ビューポート、右揃え+エレメント幅>ビューポートのときのスクロール

Question

ビューポートよりも小さく、スクロール可能で+右に整列されている限り、エレメントをビューポートの中央に配置したいとします。ビューポートよりも大きい。このように：

まず私は、Javascriptをせずにしようとしたが、フロートとオーバーフローがお互いをノックアウトされています。次に、floatでdivを配置しようとしました。要素のすぐ隣にあり、Javascriptを使ってプログラム的に幅を設定しています。しかし、要素がビューポートより小さいときは、要素は右に固執しません。

私は今考えていません。どんな提案も大歓迎です。

Answer 1

私はあなたが非改行スペースエンティティとテキスト 内部の定期的なスペースを交換することが可能かどう機能するソリューションを、持っている：ここで

http://codepen.io/anon/pen/vKgydN

は、設定の重要な部分です：

.x1 { /* wrapper for text container */ 
    display: flex; 
    flex-direction: row-reverse; 
    overflow: hidden; 
} 
.x2 { /* text container */ 
    flex: 0 0 auto; 
    display: inline-block; 
    align-items: flex-start; 
    margin: 0 auto; 
} 

だから、拡大または縮小することが許可されていない唯一のフレックス項目と逆フレックスコンテナのセンタリングとalign-items: flex-start fに対するmargin: 0 autoを持っていますまたは親要素/ビューポートよりも狭くなっている場合は右揃えにします。

EDIT /追加の発言：スクロール能力を忘れていましたが、今は解決策が見つかりません。それにもかかわらず、私はここでこの "半分の答え"を残しています - 他の人が残りの部分を思いついてくれたかもしれません.......

Answer 2

一方、私はJQueryを利用して望ましい動作を達成しました。それは完璧ではないと私はまだJavascriptのないソリューションがあることを望む。

これを機能させるために私が行ったことは次のとおりです。

HTML：

<div class="breadcrumb-scroller-container"> 
    <div class="breadcrumb-scroller"> 
     scroller content 
    </div> 
</div> 

はCSS：

.breadcrumb-scroller-container { 
    text-align: center; 
} 

.breadcrumb-scroller { 
    overflow: auto; 
    white-space: nowrap; 
} 

のJavascript（jQueryの）：

$(document).ready(function() { 
    // scroll left to a maximum of 10000px just to be sure 
    $(".breadcrumb-scroller").scrollLeft(10000); 
}); 

あなたも$（ドキュメント）.ready（）発火の問題をタイミングしている場合ブラウザーでスクローラーを初期化する前に、少し遅れてください：

$(document).ready(function() { 
    setTimeout(function() { 
     $(".breadcrumb-scroller").scrollLeft(10000); 
    }, 500); 
});