html - 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 的设计方式使其自动管理元素分组及其在主要或次要(溢出)区域中的定位。所以无论你要做什么，都将是一种“黑客”的既定行为。例如。尚不清楚当空间不足时应如何重新定位此类按钮。

如果你想在左边有按钮，在右边有按钮，我建议只添加两个工具栏:

• 对于左侧 - 添加 style="direction:rtl" 以确保按钮与左边缘对齐。
• 对于正确的 - 继续使用您已有的东西。