我有一个简单的 HTML 标记,其中包含一个包含两列的容器。每列都有一个 <input>
类型为 text
的元素另一个 <a>
元素。
<div class="container align-center">
<div class="col col-440">
<input type="text" name="pickup-info" placeholder="Afhaaladres">
</div>
<div class="col col-60">
<a class='submit-link' href="#">Go</a>
</div>
<div style="clear:both;"></div>
</div>
CSS:
.container {
margin: auto;
width: auto;
max-width: 960px;
text-align: center;
}
@media (max-width: 1024px) {
.container {
margin-left: 30px;
margin-right: 30px;
}
}
.col {
display: inline-block;
float: left;
}
@media (max-width: 768px) {
.col {
display: block;
float: none;
width: 100% !important;
}
}
/* 440 + 60 = 500 */
.col-440 { width: 440px; }
.col-60 { width: 60px; }
.align-center { text-align: center !important; }
如您所见,类型为 text
的输入元素在右侧有这个 5px 的额外空间,这导致 <a>
元素重叠 <input>
元素。我怎样才能摆脱它?
最佳答案
您的示例代码中似乎缺少 CSS,但您似乎在 100% 的宽度之上添加了填充。你可以通过添加来解决这个问题
box-sizing:border-box
到你的文本输入
关于html - 输入元素占用额外空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40439315/