文本和按钮的响应式布局

Question

如何使容器内的文本和按钮响应？我尝试只在@ media中添加我的表响应，但不添加按钮和文本。下面是我的html和css代码。

<p>Welcome to LinkSphere</p>
<div id="home-button">
<a class="button1" href="#">Fill Form</a>
<a class="button1" href="#">View Results</a>
<a class="button1" href="#">Admin Site</a>
</div>

CSS:
p{
text-align:center;
font-size:25px;
line-height: 150%;
margin:-50px 80px 0;
}
/*Home table button*/
#home-button{
text-align: center;
margin: 100px 60px 0 0!important;
}
.button1 {
display: inline;
text-decoration:none;
margin:0 20px;
width: 12em;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;  
border-radius: 5px;
color: #FFFFFF; /*words*/
background: #0080FF;
font-weight: bold;
-webkit-appearance: none;
}
.button1:hover { /*after pointing*/
cursor: pointer;
background: #00407F;
color: #FFFFFF;
text-decoration:none;
}

Answer 1

您的display: inline声明就是您的按钮不能填充整个内容宽度的原因。

如果您将其更改为display: block，那么您的按钮将增长到填充它所在的内容区域。