html - 联系表格和页脚样式问题
问题描述
我的联系表单和页脚有一些样式问题:我希望border-top
页脚 div 的顶部有一个用于分隔联系表单和页脚的样式。但是,border-top
页脚的被推到接触表单的顶部上方,而不是页脚的顶部
如果我删除联系表格,那border-top
就是它需要的地方......我附上了一张图片(因为到目前为止代码片段并没有做我的造型)
#contact-text-title {
color: #5CDB95;
}
.left-grid, .right-grid {
width: 49%;
float: left;
margin-top: -2%;
}
.left-grid {
margin-right: 1%;
}
.right-grid {
margin-left: 1%;
}
#mobile-contact-content {
display: none;
}
form {
width: 98%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 18px;
font-family: Karla;
}
input, textarea {
display: block;
width: 100%;
border: 1px solid black;
padding: .5rem;
font-family: Montserrat;
font-weight: 300;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Montserrat;
font-size: 18px;
border: 1px solid #379683;
padding:.5rem;
width: auto;
margin-top: 15px;
background-color: #379683;
color: #FFF;
}
button:hover {
cursor: pointer;
color: #379683;
border-color: #379683;
background-color: #FFF;
}
#contact-text {
display: table-cell;
text-align: center;
vertical-align: middle;
line-height: 48px;
height: 500px;
}
footer {
font-size: 12px !important;
height: 25px;
}
footer p {
border-top: 1px solid black;
}
footer .logo {
font-size: 18px !important;
border: 0px solid black;
text-align: left;
width: 50%;
float: left;
margin-bottom:30px;
}
footer #facebook {
font-size: 18px !important;
text-align: left;
width: 50%;
float: left;
margin-bottom:30px;
margin-top:17px;
color: #05386B;
}
footer #facebook:hover {
cursor: pointer;
}
<div class="col">
<div id="contact-block">
<div id="header">
<h4>Contact.</h4>
</div>
<div id="mobile-contact-content">
<p class="content-text">Do you have an idea for your garden or driveway?</p>
<p class="content-text"><span>We want to hear about it!</span></p>
<p class="content-text">Use the contact form to get in touch with us!</p>
</div>
<div class="left-grid">
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="right-grid" id="contact-box">
<div id="contact-text">
<p><span id="contact-text-title">Have a new project idea?</span>
<br>Use the contact form to tell us about it and we will get in touch with you</p>
</div>
</div>
</div>
</div>
<div class="col">
<footer>
<p><span class="logo" style="text-align:left;">Rob Moore LTD</span><span id="facebook" style="text-align:right;"><i class="fab fa-facebook-f fa-lg"></i></span>
</p>
</footer>
</div>
解决方案
将 float:left 设置为 .col。
.col {
float: left;
}
并且还添加了一个宽度:100%;到最后一个包含页脚的 .col。
推荐阅读
- c++ - 从位图中提取像素数据的问题
- gradle-kotlin-dsl - 如何将所有系统属性传递给 gradle kotlin dsl 中的测试任务?
- python - 在 python 中执行任意 *real* 代码块(不是字符串化版本)
- java - Android Studio:单击按钮时没有吐司消息
- c++ - 当数组对象作为函数参数传递时,为什么复制构造函数不会调用自己?
- windows - MSI Installer 一直无法在 Windows Server 上安装 Adobe InCopy 32/64bit
- php - 在 Woocommerce 中自动更新购物车商品数量变化的购物车总数
- c++ - 如何修复:“MySQL_Prepared_ResultSet::getInt: 'columnIndex' 的值无效”
- excel - 在 Excel 中,如何使用 VBA 动态合并具有相同值的单元格?
- c++ - 创建为双指针的两个暗淡数组的计数大小