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

您的var vis = d3.select(".pie_chart") .append("svg:svg")声明是您的按钮未填充内容的完整宽度的原因。

如果您将其更改为display: inline，那么您的按钮将会增长，以填充其被包装的内容区域。

响应式文本和按钮布局

1 个答案: