Question

问题是我们的网站上会有很多不同的语言，其动态文本长度未知。我需要将所有内容都集中在一起，但不要手动为每个区域添加一个右边距。如果它可以进行某种类型的jQuery计算并且使它们看起来像每次都这样看起来很好但是自动完成： Click here to see my CSS example

我尝试修改this jQuery script I found但是我失败了，你可以在这里看到jsfiddle.net/UTaSg/86/
如果它没有为最后一个孩子添加额外的宽度（没有空间），这可能会有效在“Type：All Solo Band Group”的右侧。

我不知道该怎么做，任何帮助都将不胜感激。在此先感谢您的帮助！如果可能，请使用示例。

在990px容器中总会有这4个过滤器，我希望在所有不同语言的末尾保留25px的空间。所以他们的文本长度会略有变化，我希望3个过滤空间之间的空间相等。

Answer 1

这可能不是您所希望的，但如果您真的不知道每列的过滤器的宽度或数量，那么我认为您应该考虑其他可能的设计。

这是过滤器下拉列表的主要候选者。是的，它不是那么酷，但它很实用。

另一种选择是在每列上设置固定宽度，然后使用text-overflow: ellipsis;来处理文本溢出。这将有助于访问者了解有更多可用的过滤器，并且您可以用一个小箭头图形来密封交易，当点击时，它会滑过以显示其他过滤器。像这样：

enter image description here

我知道你要的是一把锤子而且我给了你一根香蕉，所以我道歉这没有帮助。

Answer 2

如果你想要整个事物的中心，你应该在过滤器的容器上使用width: 100%; margin: 0 auto;，你正在做。如果您想拥有相同的填充，则不需要.leftpositive, .leftnegative, .spacingforlanguage1。你可以简单地做

.filter { padding-right: 2%; }
.filter:last-child { padding-right: 0; }

这样它相对于你剩下的空间量，间距将相对相等。您还可以创建一个网格并设置任何给定过滤器可以容纳在容器中的最大宽度（例如，第一个过滤器的宽度为33％，第二个过滤器的宽度为25％等等）。这是保持平衡的最佳方式，尤其是对于不同的浏览器宽度和设备。

Answer 3

您可以尝试简单地将每个文本的宽度相加并从整体宽度中减去它，然后将其作为右边距放在除最后一个之外的每个元素上。

你可以创建通用插件，因为这适用于任何数量的项目都在jQuery对象中有长度，你可以使用parent（）获取容器。