在p下方创建一个href

时间：2016-02-18 17:36:43

标签： html css

我试图在#supportHelp a

上的supportHelp h2下方展示我的@media only screen and (max-width: 321px)节目

这就是它的样子：
enter image description here

CSS：

#supportHelp {
  width: 100%;
  height: 200px;
}

#supportHelp h2 {
    margin-left: 10px;
    margin-top: 20px;
    font-size: 18px;
}

#supportHelp p {
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  height: 75px;
  margin-top: 15px;
}

#supportHelp a {
  background-color: #cc293f;
  font-weight: 500;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 10px;
  text-decoration: none;
}

HTML：

<div id="supportHelp">

<h2>Need more information? Get in touch <a href="http://www.sharpturnnetwork.com/support" target="_blank">CONTACT US</a></h2> 
<p>We are always here to assist, contact us via e-mail, social media or our live chat.</p>

</div>

5 个答案:

答案 0 :(得分：1)

在媒体查询中，将a设置为display:block;并删除左边距：

＆＃13;
＆＃13; 
#supportHelp {
  width: 100%;
  height: 200px;
  }
  #supportHelp h2 {
    margin-left: 10px;
    margin-top: 20px;
    font-size: 18px;
  }

  #supportHelp p {
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  height: 75px;
  margin-top: 15px;
  }

  #supportHelp a {
  background-color: #cc293f;
  font-weight: 500;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 10px;
  text-decoration: none;
}

@media only screen and (max-width: 321px) {
  #supportHelp a {
    margin-left:0;
    display:block;
  }
}
＆＃13; 
<div id="supportHelp">

<h2>Need more information? Get in touch <a href="http://www.sharpturnnetwork.com/support" target="_blank">CONTACT US</a></h2> 
<p>We are always here to assist, contact us via e-mail, social media or our live chat.</p>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

基于APAD1's suggestion，我尝试display: block，但作为块元素，其宽度增加到100％。

在摆弄了这个想法之后，我使用了display: inline-block，它产生了与预期设计相同的宽度，并增加了块布局的好处。最后，我使用margin-left来正确对齐它。

答案 2 :(得分：0)

尝试将此添加到supportHelp a：

浮动：左; 宽度：100％;

如果你想限制宽度

，那就放一个最大宽度

答案 3 :(得分：0)

  

根据您的要求保留边距：30px;边距：10px的; 

 <!DOCTYPE html>
<html>
<head>
<style>
 #supportHelp {
  width: 100%;
  height: 200px;
  }
  #supportHelp h2 {
    margin-left: 10px;
    margin-top: 20px;
    font-size: 18px;
  }

  #supportHelp p {
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  height: 75px;
  margin-top: 15px;
  }

  #supportHelp a {
  background-color: #cc293f;
  font-weight: 500;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 50px;
  text-decoration: none;
}
</style>
</head>
<body>
<div id="supportHelp">

<h2>Need more information? Get in touch <br><br><a href="http://www.sharpturnnetwork.com/support" target="_blank">CONTACT US</a></h2> 
<p>We are always here to assist, contact us via e-mail, social media or our live chat.</p>

</div>
</body>
</html>

答案 4 :(得分：0)

您可以在锚标记上使用display: inline-block;为其提供自己的边距，填充等。

（当您运行代码段时，请点击＆＃34;整页＆＃34;按钮，以便您可以调整窗口大小。）

＆＃13;
＆＃13; 
#supportHelp {
  width: 100%;
  height: 200px;
}

#supportHelp h2 {
    margin-left: 10px;
    margin-top: 20px;
    font-size: 18px;
}

#supportHelp p {
  font-size: 16px;
  margin-left: 10px;
  margin-right: 5px;
  height: 75px;
  margin-top: 15px;
}

#supportHelp a {
  display: inline-block;
  background-color: #cc293f;
  font-weight: 500;
  color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: 10px;
  text-decoration: none;
}
＆＃13; 
<div id="supportHelp">

<h2>Need more information? Get in touch <a href="http://www.sharpturnnetwork.com/support" target="_blank">CONTACT US</a></h2> 
<p>We are always here to assist, contact us via e-mail, social media or our live chat.</p>

</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题