HTML CSS - 响应按钮（网格） [英] HTML CSS - Responsive buttons (grid)

问题描述

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

HTML

 < div class =middle > 
< center> 
< br> 
< br> 
< button type =button3class =button3> 
< a href =301.html> 301< / a> 
< / button> 
< button type =button3class =button3> 
< a href =305.html> 305< / a> 
< / button> 
< button type =button3class =button3> 
< a href =308.html> 308< / a> 
< / button> 
< br> 
 
< button type =button3class =button3> 
< a href =303.html> 303< / a> 
< / button> 
< button type =button3class =button3> 
< a href =306.html> 306< / a> 
< / button> 
< button type =button3class =button3> 
< a href =309.html> 309< / a> 
< / button> 
< br> 
 
< button type =button3class =button3> 
< a href =304.html> 304< / a> 
< / button> 
< button type =button3class =button3> 
< a href =307.html> 307< / a> 
< / button> 
< button type =button3class =button3> 
< a href =310.html> 310< / a> 
< / button> 
< br> 
 
< button type =button3class =button3> 
< a href =311.html> 311< / a> 
< / button> 
< button type =button3class =button3> 
< a href =312.html> 312< / a> 
< / button> 
 
 
 
< / center> 
< / div> 
  

CSS

  .button {
 height：40px; 
 width：130px; 
保证金底部：3％; 
背景颜色：＃7C8082; 
 font-size：100％; 
颜色：白色; 
 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; 
背景颜色：＃7C8082; 
 font-size：100％; 
颜色：白色; 
 font-family：'Muli'，sans-serif; 
 border-radius：5px; 
 margin-top：5px; 
} 
 .button1：hover {
 background-color：＃474240; 
} 
 
 .button3 {
 height：40px; 
 width：70px; 
背景颜色：＃7C8082; 
 font-size：100％; 
颜色：白色; 
 font-family：'Muli'，sans-serif; 
 border-radius：5px; 
 margin-top：10px; 
} 
 
 .button3：hover {
 background-color：＃474240; 
} 
  

解决方案

.button3 class如下

  .button3 {
 width：30％; 
} 
  

演示

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

解决方案

Just update width in percentage for .button3 class as below

.button3 {
   width: 30%;
}

Demo

这篇关于HTML CSS - 响应按钮（网格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！