带有 UI 滑块的工具栏 CSS 居中在左右按钮之间

Question

我正在尝试创建一个 100% 宽度的工具栏。此工具栏需要有多个与左侧对齐的按钮，以及多个与右侧对齐的按钮。这是最简单的部分。

但现在我想在中心放置一个 jQuery UI 滑块，它占据左侧按钮和右侧按钮之间的全部剩余空间。我在想出一种纯 CSS 的方式来做这件事时遇到了麻烦。

我尝试过类似下面的方法，但我真的不希望有固定的百分比宽度。如果左侧只有一个按钮，右侧只有一个按钮，那么我希望居中的滑块占据它们之间的全部空间，而不仅仅是整个宽度的 33%。

.toolbar {width: 100%;}
.toolbar .toolbar-left {float: left;width: 33%;}
.toolbar .toolbar-right {float: right;width: 33%;}
.toolbar .toolbar-center {margin: 0 auto;width: 33%;}

我正在为我的按钮和样式使用 UI 按钮 -- see an example。在该示例中，有一个工具栏是页面的整个宽度。想象一下最右边的两组按钮与工具栏的右侧对齐。然后在中间的空白处，我想放一个 UI Slider，并使用按钮之间的所有空间（减去一些填充）。

有没有办法用 CSS 做到这一点，还是我需要编写一些 javascript 来正确定位？

解决方案

如果它对任何人有帮助，这就是我根据@Ken 的建议提出来完成这项工作的。请注意，它支持工具栏中的多个toolbar-left 和toolbar-right 块，但只支持一个toolbar-center。我还在代码中添加了一些填充，但这可能由 CSS 处理。

<div class="toolbar ui-helper-clearfix">
<div class="toolbar-left">Left buttons</div>
<div class="toolbar-right">Right buttons</div>
<div class="toolbar-Center">
    <div class="slider"></div>
    </div>
</div>

.toolbar .toolbar-left {float: left;}
.toolbar .toolbar-right {float: right;}
.toolbar .toolbar-center {position: relative;}

$(".toolbar").each(function() {
    var $this = $(this);
    var left = 0;
    $(".toolbar-left", $this).each(function() {
        left += $(this).outerWidth();
    });
    var width = $this.outerWidth() - left;
    $(".toolbar-right", $this).each(function() {
        width -= $(this).outerWidth();
    });
    var $center = $(".sz-toolbar-center", $this);
    width -= ($center.outerWidth() - $center.width());
    $center.width(width - 30);
    $center.css({"left": (left+15)+"px"});
});

需要注意的一个问题是调整浏览器窗口的大小不会重新计算工具栏的大小。因此，请确保在更改工具栏宽度时调用此代码，包括调整浏览器窗口的大小等。

Answer 1

如果您不希望将左/右部分调整到其内容的大小，那么您需要浮动它们。如果你让它们浮动，你就不能让中心的空间像你想要的那样填充剩余的空间。

使用 JavaScript 或使用非语义的 <table> 元素。