輸入元素需要額外的空間

我有一個簡單的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>元素。我怎樣才能擺脫它？

來源

2016-11-05 erol_smsr

缺少代碼中的任何CSS解決這個問題？我的筆目前看起來像這樣：https://codepen.io/Aer0/pen/WobbBW – Aer0

看起來你的示例代碼中缺少CSS，但它看起來像在100％的寬度上添加了填充。您可以添加

box-sizing:border-box

你的文本輸入

來源

2016-11-05 14:37:17 ilwcss

修復它。謝謝！ –

輸入元素需要額外的空間

回答

相關問題