html - W3schools CSS 联系表格与另一个 div 合并
问题描述
<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 来防止这种合并。我希望表格不要合并到版权栏中。并在版权栏上方单独显示表格。
解决方案
只是一个疯狂的想法,但尝试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>
推荐阅读
- css - 动画 linkBorderHover 不适用于 ::after / ::before 元素?
- java - 根据坐标占位符替换 PDF 中的字符串/行并使用 java 重新对齐 PDF 的内容
- ios - 使用 PHImageManager 时,PHAsset 返回 UIImage 的 nil 值
- python - 如何将 cumcount 应用于两列?
- c# - 如何在瓷砖地图中动态设置瓷砖?
- c++ - spoj SEQ - 递归序列运行时错误
- javascript - 需要帮助单击没有任何标识符的 ``` ``` 元素
- c# - 禁止在文本框中输入无效字符列表的自定义验证属性
- c# - iOS 13 中的 Xamarin 基本共享
- php - php mysqli 表单 - 从选择下拉更新中填写输入