Div 块没有释放按钮空间

Question

Div 块没有为一行中的按钮释放空间

我有一个带有按钮的块，按钮在 1920x1080 像素时看起来不错，但是如何为 1080x720 和移动平台制作自适应按钮？自适应按钮可以在 wordpress 中使用吗？

.main_button_left {
  color: white;
  text-decoration: none;
  padding: 12px 0px 15px 0px;
  border-radius: 0px 0px 0px 15px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  font-size: 15px;
  width: 150px;
}

.main_button {
  color: white;
  text-decoration: none;
  padding: 12px 0px 15px 0px;
  border-radius: 3px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  font-size: 15px;
  width: 150px;
}

button.main_button:hover,
button.main_button_right:hover,
button.main_button_left:hover {
  background: #ffcd07;
  border-color: #ffcd07;
}

.main_button_right {
  color: white;
  text-decoration: none;
  padding: 12px 0px 15px 0px;
  border-radius: 3px;
  background: #ff6500;
  transition: 1s;
  border-color: #ff6500;
  border-bottom-right-radius: 10px;
  font-size: 15px;
  width: 150px;
}

<section class="slider">
  <div class="main_panel">
    <button class="main_button_left">Button1</button>
    <button class="main_button">Button2</button>
    <button class="main_button">Button3</button>
    <button class="main_button">Button4</button>
    <button class="main_button">Button5</button>
    <button class="main_button">Button6</button>
    <button class="main_button">Button7</button>
    <button class="main_button_right">Button8</button>
  </div>
</section>

Answer 1

您可以为按钮使用弹性框并设置最小宽度。使用媒体查询，您可以根据您的要求以不同的方式呈现它们。堆叠时，将最小宽度设置为 100%。

button {
  color: white;
  background: #ff6500;
  border-color: #ff6500;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 0px 15px 0px;
  min-width: 70px;
  transition: 1s;
  width: 12%;
  border-radius: 3px;
}

.main_button_left {
  border-radius: 0px 0px 0px 15px;
}

button:hover {
  background: #ffcd07;
  border-color: #ffcd07;
}

.main_button_right {
  border-bottom-right-radius: 10px;
}

.main_panel {
  display: flex;
  flex-wrap: wrap;
}

<section class="slider">
  <div class="main_panel">
    <button class="main_button_left">Button1</button>
    <button class="main_button">Button2</button>
    <button class="main_button">Button3</button>
    <button class="main_button">Button4</button>
    <button class="main_button">Button5</button>
    <button class="main_button">Button6</button>
    <button class="main_button">Button7</button>
    <button class="main_button_right">Button8</button>
  </div>
</section>

Answer 2

在小屏幕上，您可以垂直堆叠按钮，或者隐藏菜单并创建一个按钮，这将显示按钮。