时间戳

首页 > 解决方案 > 调整窗口大小时如何使按钮位于同一行

html - 调整窗口大小时如何使按钮位于同一行

问题描述

当我调整窗口大小并使其更小时，按钮相互重叠，我怎样才能使它在同一行

.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>

标签： htmlcss

解决方案

我认为您错过了 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>

推荐阅读