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; }
、その列内の要素は次のようになります。あなたが見ることができるように
、タイプtext
とinput要素は、この5pxのを持っています右側に余分なスペースがあり、<a>
要素が<input>
要素と重複しています。どうすればそれを取り除くことができますか?
に
を追加することでこれを解決することができますか?私のペンは現在次のようになっています:https://codepen.io/Aer0/pen/WobbBW – Aer0