Làm thế nào để căn được button tìm kiếm nằm ngang và sát với text box?

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.

Codepen URL sai mất rồi bạn ơi.

2 Likes

:smile: gõ xong quên save. Mình đã sửa lại link


Thêm dòng này vào wrap-class 2 component đó là đc

  display: flex;
  align-items: center;
3 Likes

oài, quên mất dùng flexbox :smile: thank you

Hoặc sài như này cũng đc

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Nguồn https://css-tricks.com/centering-css-complete-guide/

3 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?