如何解决溢出的内容

时间:2016-11-14 22:30:25

标签: html css

我刚刚在输入文本类型后添加了一个链接标记,但是当我查看该网站时,链接会在输入顶部显示,因为您可以在照片上看到并且看不到任何错误。 也许有一个我不知道的重置css。

a.activate {
  background-color: pink;
  padding: 10px;
}
<div class="cont bonus">
  <h3>You have no active Bonus on your account</h3>
  <h4>Got a Bonus code?</h4>
  <input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
  <br>
  <div id="activate">
    <a class="activate" href="#">Activate</a> 
  </div>
</div>

2 个答案:

答案 0 :(得分:2)

那是因为您的链接是内联元素。您添加的填充对于内联元素的行为与块元素的行为不同。

将您的链接设为display: inline-block;

&#13;
&#13;
a.activate {
  background-color: pink;
  padding: 10px;
  display: inline-block;
}
&#13;
<div class="cont bonus">
  <h3>You have no active Bonus on your account</h3>
  <h4>Got a Bonus code?</h4>
  <input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
  <br>
  <div id="activate">
    <a class="activate" href="#">Activate</a> 
  </div>
</div>
&#13;
&#13;
&#13;

  

内联元素仅占用由定义内联元素的标记限定的空间。

- MDN Inline Elements

答案 1 :(得分:2)

只需添加显示块即可输入。无需改变任何东西。

input{
   display:block;
}