W3schools CSS联系人表单与另一个div合并

Question

​

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container w3-half">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4">© Copyright 123456789. All rights Reserved.</p>

​

正如您所看到的，表单正在版权栏中合并。如何防止这种完全使用w3-css的合并。我不希望表单合并在版权栏中。并在版权栏上方单独显示表单。

Answer 1

这只是一个疯狂的想法，但请尝试w3-container而不是w3-padding...

编辑

正如其他评论所说，w3-half包含float。所以你的页脚应该包含clear...

​

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container w3-half">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4" style="clear: both;">© Copyright 123456789. All rights Reserved.</p>

​

Answer 2

w3-half类有float: left; width: 49.99999%;，如果你不需要两列，就把它去掉。

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<p>Please open this in full screen</p>
<form class="w3-container">
<label>Name</label>
<input type="text" class="w3-input w3-border"/><br/>
<input type="submit" class="w3-button w3-black"/>
</form>
<p class="w3-padding w3-center w3-card-4">© Copyright 123456789. All rights Reserved.</p>