html - 输入元素占用额外空间

Question

我有一个简单的 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>元素。我怎样才能摆脱它？

Answer 1

您的示例代码中似乎缺少 CSS，但您似乎在 100% 的宽度之上添加了填充。你可以通过添加来解决这个问题

box-sizing:border-box

到你的文本输入