2016-11-05 34 views
0

2列の内部にあるコンテナを含む単純なHTMLマークアップがあります。各列にはtextタイプの<input>要素があり、もう1つは<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; } 

、その列内の要素は次のようになります。あなたが見ることができるように Screenshot

、タイプtextとinput要素は、この5pxのを持っています右側に余分なスペースがあり、<a>要素が<input>要素と重複しています。どうすればそれを取り除くことができますか?

+1

box-sizing:border-box 

を追加することでこれを解決することができますか?私のペンは現在次のようになっています:https://codepen.io/Aer0/pen/WobbBW – Aer0

答えて

1

サンプルコードにCSSがないようですが、100%の幅の上に余白を追加したようです。あなたは、あなたのコード内の任意のCSSが欠落してテキスト入力

+0

それを修正しました。ありがとう! –

関連する問題