Html 按钮宽度百分比重新调整大小问题

我有纽扣

#buttons {
/*Div containing the buttons*/
margin-top: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
border: 1px solid black;
}

.navbutton {
/*8 buttons*/
height: 38px;
float: left;
min-width: 60px;
max-width: 140px;
display: inline-block;
width: 12.5%;
background-image: url(button.jpg);
background-size: 100%;
color: white;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #d0d0d0;
border: outset #555 1.5px;
cursor: pointer;
text-align: center;
font-size: 16px;
}

#content {
/*containing everything, centred*/
margin-left: auto;
margin-right: auto;
width: 90.54%;
color: white;
border: 2px solid yellow;
}

和HTML

<div id="content">
    <div id="buttons">
        <button type="button" class="navbutton" onclick="location.href='#';" style="color: #149ae7; border-top-left-radius: 5px; border-bottom-left-radius: 5px;">HOME</button>
        <button type="button" class="navbutton">PART A</button>
        <button type="button" class="navbutton">PART B</button>
        <button type="button" class="navbutton">PART C</button>
        <button type="button" class="navbutton">PART D</button>
        <button type="button" class="navbutton">PART E</button>
        <button type="button" class="navbutton">PART F</button>
        <button type="button" class="navbutton" style="color: #e7db17; border-bottom-right-radius: 5px; border-top-right-radius: 5px;">HELP</button>
    </div>
</div>

家
A部分
乙部
丙部
D部分
E部分
F部
帮助

当我缩小浏览器窗口的宽度时，如何使按钮“向内挤压”？类似（但所有按钮大小相同）

目前它是不工作的，如果我减少网站的宽度，一切都像一个单一的图像，所以没有什么是重新缩放

---

感谢您使用CSS媒体查询可以做到这一点，例如，当窗口宽度小于400px时，您可以使用CSS媒体查询为元素定义新样式

这是一个例子

相关代码位于CSS的顶部：

@media(max-width:400px){
   ul li{
    display: block !important;
    width:100% !important;
    text-align: left !important;
    margin-bottom:2px;
   }
}

---

“挤压”是指当浏览器窗口变小时，重新排列按钮以占据整个宽度吗？