HTML CSS - Responsive buttons (grid)

问题

I have this portion in a website wherein there are buttons that looks like a grid, but they are just aligned by the usual css. It also only has 1 div which serves as its container. Is it possible to make the buttons responsive so that when the window is scaled larger or smaller, the buttons will still be in place? Thanks!

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;
    }

回答1:

Just update width in percentage for .button3 class as below

.button3 {
   width: 30%;
}

Demo

回答2:

Remove break <br> which is placed between your button groups. This will make all button adjust themselves in grids as the size of window vary.

If you need all buttons should always be in their exact place (i.e. exactly n number of button in a row) then try to give width of button in percentage.

来源：https://stackoverflow.com/questions/33073796/html-css-responsive-buttons-grid

标签

html

css

button

responsive-design