如何解决满溢的内容

Question

我刚刚在输入文本类型后添加了链接标记，但是当我查看该网站时，链接会在输入顶部显示，您可以在照片中看到并且看不到任何错误。 也许有一个重置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>

Answer 1

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

设置你的链接到display: inline-block;

a.activate { 
 
    background-color: pink; 
 
    padding: 10px; 
 
    display: inline-block; 
 
}

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

一个内联元素占据只定义了内联元素标签界定的空间。

- MDN Inline Elements。

Answer 2

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

input{ 
    display:block; 
}