Winjs：特定のツールバーコントロールを左に配置

Question

ツールバーの特定のコントロールを左に配置したいとします。私は幾分達成しましたが、下のスクリーンショットからわかるように、それらは重複しています。ここで

が私のHTMLです...

<div class="AudioControls" data-win-control="WinJS.UI.ToolBar"> 
     <!--Top Level Controls--> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id: 'cmdPrevTrack', 
        label: 'Previous', 
        type: 'button', 
        icon: 'previous', 
        section: 'primary', 
        priority: 1 
       }" class="AudioControlsPosLeft"></button> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id:'cmdPlay', 
        label: 'Play', 
        type: 'button', 
        icon: 'play', 
        section: 'primary', 
        priority: 2 
       }" class="AudioControlsPosLeft"></button> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id: 'cmdNextTrack', 
        label: 'Next', 
        type: 'button', 
        icon: 'next', 
        section: 'primary', 
        priority: 3 
       }"></button> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id: 'cmdChangeVolume', 
        label: 'Volume', 
        type: 'button', 
        icon: 'volume' 
       }"></button> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id: 'cmdShuffleTrackLst', 
        label: 'Shuffle', 
        type: 'button', 
        icon: 'shuffle' 
       }"></button> 
     <button data-win-control="WinJS.UI.Command" 
       data-win-options="{ 
        id: 'cmdSettings', 
        label: 'Settings', 
        type: 'button', 
        icon: 'settings' 
       }"></button> 

そして、私のCSS ...

.AudioControls { 
    position: fixed; 
    bottom: 0px; 
    width: 100%; 
    background-color: black; 
    color:white; 
} 

.AudioControlsPosLeft { 
    position: absolute !important; 
    left: 5px; 
} 

任意の助けいただければ幸いです。 ありがとう：D

Answer 1

技術的にToolBarは、要素のグループ化と、1次または2次（オーバーフロー）領域での要素の配置を自動的に管理するように設計されています。ですから、あなたがしようとしていることは、「ハッキングする」規定された行動の一種になります。例えば。十分なスペースがないときに、どのようにそのようなボタンの位置を変えるべきかははっきりしない。

あなたは右に左のボタンのボタンを持つようにしたい場合は、私はちょうど2つのツールバーを追加することをお勧めします：左の一つは

• を - ボタンが左端に整列されていることを確認するためにstyle="direction:rtl"を追加します。
• 正しいもの - すでに持っているものを使用し続けます。

Answer 2

ツールバーコントロールはフレックスレイアウトを使用します。そしてjustify-contentプロパティーは.win-commandingsurface-actionareaで、ボタン内部の流れ方向を制御します。

、左のボタンを移動するだけで、あなたのCSSファイルでこのプロパティをオーバーライドするには、次の

.win-commandingsurface-actionarea { 
    justify-content:flex-start!important; 
} 

とボタンが左に移動されます。