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滑块，并使用按钮之间的所有空间（减去一些填充）。

有没有办法用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>元素。

工具栏的CSS，UI滑块位于左右按钮之间

解决方案

1 个答案: