Hello.
Mình tạo 1 form tìm kiếm như sau:
html
<form action="#" method="get" class="search">
<input type="text" class="text-search" placeholder="Search"/>
<button type="submit" class="submit-btn-search"><i class="fa fa-search"></i></button>
</form>
css
body {
background-color: tomato;
}
.search {
padding: 5px 0px 5px 0px;
text-align: center;
}
.text-search {
background: #f3f4f5;
width: 170px;
height: 23px;
padding: 5px;
font-size: 14px;
border-radius: 3px 0 0 3px;
border: none;
}
.submit-btn-search {
background: #f3f4f5;
padding: 8px 10px 8px 10px;
border: none;
border-radius: 0 3px 3px 0;
vertical-align: middle;
font-size: 15px;
}
.submit-btn-search:focus, .text-search:focus {
outline: none;
}
xem ví dụ trực quan tại: https://codepen.io/anon/pen/JMeRMv?editors=1100
Nhưng các button tìm kiếm nó lại nằm lệch so với text box và không sát vào được. Mình đã sử dụng thuộc tính vertical: middle; nhưng nó vẫn bị lệch. Và không thể nằm sát với text box, mình có sử dụng mẹo thêm cặp kí hiệu ghi chút vào đâu và cuối 2 thành phần text box và button để nối liền nó như sau
<input type="text" class="text-search" placeholder="Search"/><!--
--><button type="submit" class="submit-btn-search"><i class="fa fa-search"></i></button>
nhưng khi zoom trang hoặc thu nhỏ trình duyệt thì nó lại bị như cũ, Mình tìm hiều thì biết là 2 thành phần kia k sát nhau được do đó là 2 thành phần riêng biệt, phải bỏ qua dấu enter hoặc space bằng cách thêm cặp ghi chú vào thì nó sẽ sát
How to fixed it?
Thank you.