如何在调整窗口大小时使按钮在同一行

Question

当我调整窗口大小并使其变小时，按钮会相互重叠我怎么能在同一条线上做

.category {
position: relative;
width: 50%;
}
.category button {
background-color: #3c3c3c;
border-color: #3c3c3c;
color: #ebebeb;
border-radius: 0.3rem;
transition: all 0.2s ease 0s;
float: left;
}

<div class="category">
<button>ALL</button>
<button>SOFA</button>
<button>CHAIR</button>
<button>BED</button>
<button>LAMP</button>
<button>ACCESSORIES</button>
</div>

Answer 1

我想你在HTML中错过了一个按钮，但如果它是你要搜索的：

使用display: flex;和overflow-x: visible;，即使使用小屏幕也可以实现您想要的功能。如果您希望能够滚动而不仅仅显示div的溢出，可以将overflow-x更改为scroll或auto。

.category {
display: flex;
overflow-x: visible;
width: 80px;
}
.category button {
background-color: #3c3c3c;
border-color: #3c3c3c;
color: #ebebeb;
border-radius: 0.3rem;
transition: all 0.2s ease 0s;
}

<div class="category">
<button >Button 1</button>
<button >Button 2</button>
</div>

Answer 2

如果你想在包装中包含按钮，并让子按钮只在包装中可见，你可以试试这个：

HTML:

<div class="category">
<button >Button 1</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
<button >Button 2</button>
</div>

CSS：

.category {
display: flex;
overflow-x: auto;
width: 50%;
}
.category button {
background-color: #3c3c3c;
border-color: #3c3c3c;
color: #ebebeb;
border-radius: 0.3rem;
transition: all 0.2s ease 0s;
}

这将保持你的按钮只有50%的宽度。在overflow可见的情况下，它将占用整个宽度，并且不考虑包装器的宽度。