Ok điều này dường như là không thể để có được đúng. Tôi có một hộp văn bản và một hộp chọn. Tôi muốn chúng có cùng chiều rộng chính xác để chúng xếp hàng ở lề trái và lề phải.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
Điều đó sẽ làm được bạn nghĩ, phải không? Không. Hộp chọn ngắn hơn 6px trong Firefox. Xem ảnh chụp màn hình.
Được rồi, hãy chỉnh sửa mã và tạo hai kiểu.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Được rồi!
Chờ đã, kiểm tra tốt hơn trong Chrome ...
Ai đó có thể cho tôi biết cách sắp xếp những thứ này trong tất cả các trình duyệt không? Tại sao tôi không thể chỉ làm width: 200px trên tất cả, tại sao tất cả các trình duyệt hiển thị nó khác nhau? Ngoài ra, trong khi chúng ta đang ở đó tại sao hộp văn bản và hộp chọn lại có chiều cao khác nhau? Làm thế nào để chúng ta có được chúng cùng chiều cao? Đã thử chiều cao và chiều cao dòng đều không có kết quả.
Giải pháp:
Ok, tôi đã tìm thấy giải pháp với một số trợ giúp từ các câu trả lời bên dưới. Điều quan trọng là sử dụng thuộc tính box-sizing: border-box để khi bạn chỉ định chiều rộng bao gồm đường viền và phần đệm. Xem giải thích xuất sắc ở đây . Sau đó, trình duyệt không thể tải nó lên.
Mã bên dưới, cũng đã đặt chiều cao của các hộp bằng cùng kích thước và thụt lề văn bản bên trong hộp để nó thẳng hàng. Bạn cũng cần đặt đường viền vì Chrome có một đường viền trông thực sự kỳ lạ mà nó sử dụng cho các hộp chọn lọc sẽ làm mất sự liên kết. Điều này sẽ hoạt động cho các trang web HTML5 (ví dụ: hỗ trợ IE9, Firefox, Chrome, Safari, Opera, v.v.).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Chỉ một cảnh báo cuối cùng là bạn có thể không muốn các nút nhập, hộp kiểm, v.v. được đưa vào kiểu này, vì vậy hãy sử dụng input:not([type='button'])để không áp dụng nó cho một số kiểu nhất định hoặc sử dụng input[type='text'], input[type='password']để chỉ định những kiểu bạn muốn áp dụng.