Question

我在网站中有这个部分，其中有一些看起来像网格的按钮，但它们只是按照通常的css对齐。它也只有1个div作为它的容器。是否可以使按钮响应，以便当窗口缩放更大或更小时，按钮仍然就位？谢谢！

HTML

    <div class="middle">
        <center>
        <br>
        <br>
        <button type="button3" class="button3">
        <a href="301.html">301</a>
        </button> 
        <button type="button3" class="button3">
        <a href="305.html">305</a>
        </button>
        <button type="button3" class="button3">
        <a href="308.html">308</a>
        </button>
        <br>

        <button type="button3" class="button3">
        <a href="303.html">303</a>
        </button> 
        <button type="button3" class="button3">
        <a href="306.html">306</a>
        </button> 
        <button type="button3" class="button3">
        <a href="309.html">309</a>
        </button> 
        <br>

        <button type="button3" class="button3">
        <a href="304.html">304</a>
        </button>
        <button type="button3" class="button3">
        <a href="307.html">307</a>
        </button>
        <button type="button3" class="button3">
        <a href="310.html">310</a>
        </button> 
        <br>

        <button type="button3" class="button3">
        <a href="311.html">311</a>
        </button> 
        <button type="button3" class="button3">
        <a href="312.html">312</a>
        </button>



        </center>
    </div>

CSS

.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}

    .button:hover {
background-color: #474240;
    font-family: 'Muli', sans-serif;
}   

    .button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
    font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
     .button1:hover {
background-color: #474240;
}

    .button3 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
     font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}

    .button3:hover {
background-color: #474240;
    }

Answer 1

只需更新.button3类的宽度百分比，如下所示

.button3 {
   width: 30%;
}

Demo

Answer 2

删除位于按钮组之间的中断<br>。这会使所有按钮在网格中自行调整，因为窗口的大小会有所不同。

如果你需要所有按钮应该总是在它们的确切位置（即连续n个按钮的数量），那么尝试以百分比给出按钮的宽度。

HTML CSS - 响应按钮（网格）

2 个答案: