Question

首先 - 这就是我想要实现的目标。我的新设计中有一个过滤条。在这个酒吧，有10个左右的项目。随着页面变小，并非所有这些项目都可以显示（由于宽度限制）。我有一个“更多过滤器”按钮选项，可以打开它，以便人们可以看到所有过滤器选项。无论如何，这只是一些背景。

目前我有一个包装器div，然后在每个过滤器中使用div。这是一个小提琴：

https://jsfiddle.net/pw0bum2x/

我知道我可以使用overflow: hidden来隐藏在过滤器div之外流动的内容 - 但是这会导致我的其他问题（过滤器是自定义下拉列表元素，因为它们在div内部有溢出被隐藏，然后他们没有正确显示（在父div之外被切断）

所以这是我的CSS：

.filters {
    width: 500px;
    height: 30px;
    background: green;
}   

.sub-filter {
    display: inline-block;
    width: 100px;
    background: yellow;
    overflow: hidden;
}

...然后HTML：

<div class="filters">

    <div class="sub-filter">
        test 1
    </div>
    <div class="sub-filter">
        test 2
    </div>
    <div class="sub-filter">
        test 3
    </div>
    <div class="sub-filter">
        test 4
    </div>
    <div class="sub-filter">
        test 5
    </div>
    <div class="sub-filter">
        test 6
    </div>
    <div class="sub-filter">
        test 7
    </div>
    <div class="sub-filter">
        test 8
    </div>
    <div class="sub-filter">
        test 9
    </div>
    <div class="sub-filter">
        test 10
    </div>

</div>

所以我想我真正想要的是，我怎样才能让所有这些元素保持在一条线上（这样我就可以使用overflow-x:hidden来隐藏它，而不是overflow: hidden ，这会导致我出现 y轴）

的问题

请询问您是否需要进一步澄清。希望我已经解释得很好了:)）

更新：好的，所以似乎没有一个很好的解决方案，我正在尝试做什么。虽然一些想法在某种程度上起作用，但它们并不适用于我需要如何实现它。很沮丧。我认为我将要做的是获取JS功能。基本上隐藏所有项目，然后使用jQuery获取过滤器栏的宽度，并将“ show ”类应用于我想要显示的项目（并且适合）

Answer 1

您只需将white-space: nowrap;和overflow-x: hidden;添加到.filters。

所以它会变成：

.filters {
  width: 500px;
  height: 30px;
  background: green;
  white-space: nowrap;
  overflow-x: hidden;
}	

.sub-filter {
  display: inline-block;
  width: 100px;
  background: yellow;
}

<div class="filters">

	<div class="sub-filter">
		test 1
	</div>
	<div class="sub-filter">
		test 2
	</div>
	<div class="sub-filter">
		test 3
	</div>
	<div class="sub-filter">
		test 4
	</div>
	<div class="sub-filter">
		test 5
	</div>
	<div class="sub-filter">
		test 6
	</div>
	<div class="sub-filter">
		test 7
	</div>
	<div class="sub-filter">
		test 8
	</div>
	<div class="sub-filter">
		test 9
	</div>
	<div class="sub-filter">
		test 10
	</div>
	

</div>

Answer 2

您可以使用display:flex。如果您将此附加到.filters，孩子就会坐在一条线上。

有关示例，请参阅https://jsfiddle.net/rqbjjmxy/。

内联块 - 如何显示所有一行？

2 个答案: