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

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

Answer 2

您可以将flexbox用于按钮并设置最小宽度。使用媒体查询，您可以根据您的要求以不同的方式呈现它们。堆叠时，将最小宽度设置为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>