html css 响应式设计几个按钮中间 4/0 或 2/2 但没有 3/1

Question

我目前的按钮是这样制作的（我去掉了无用的东西以重现问题）：

CSS:

    .containerWelcome{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .buttonsWelcome {
        width: 200px;
    }
    .disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

HTML:

        <div class="containerWelcome">
            <button name="button1" onclick="location.href=something0"
                    class="buttonsWelcome" type="submit"
                    value="something0">something0
            </button>
            <button name="button2" onclick="location.href=something"
                    class="buttonsWelcome" type="submit"
                    value="something">something
            </button>
            <button name="button3" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse0">somethingelse0
            </button>
            <button name="button4" onclick=""
                    class="buttonsWelcome disabled" type="submit"
                    value="somethingelse1">somethingelse1
            </button>
        </div>

如果我不放大，我会将四个按钮并排放置。哪个好。如果我放大一点或者如果我在另一台较小的笔记本电脑上，我有 3 个按钮和一个在它们下面。这有点丑陋。如果我放大得更多，我有 2 个按钮在另外 2 个按钮之上。哪个好。除了它们不是完全居中，这有点奇怪。我猜那是因为它们在容器的左边？

我的主要问题是：我想从中央容器顶部的 4 个按钮变为 2 个按钮，中央容器底部再增加 2 个按钮，而没有中间顶部有 3 个按钮的笨拙阶段容器和中心容器底部的一个。

我也在寻找一种将按钮居中放置在容器中心的方法，但我想这不太重要。

Answer 1

最简单的方法就是只使用 display flex，别担心它太容易学，检查下面的解决方案并用它替换您的 .containerWelcome 样式。

.containerWelcome {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 410px;
  margin-inline: auto;
  gap: 5px;
}

Answer 2

试试这个代码：

.containerWelcome{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display:flex;
  
}
.buttonsWelcome {
  width: 200px;
}

@media only screen and (max-width: 600px)  {
  .containerWelcome{
     flex-wrap: wrap;
  }

  .buttonsWelcome {
    flex: 50%;
  }
}

html css 响应式设计几个按钮中间 4/0 或 2/2 但没有 3/1

html css responsive design several buttons middle 4/0 or 2/2 but no 3/1

html

css

responsive-design