Yêu cầu Oct 7th, 2019 7:12 a.m. 148 0 5
  • 148 0 5
+2

GIúp đỡ css

Chia sẻ
  • 148 0 5

Chào mọi người, mình có làm cái navbar sử dụng bootstrap 4 như hình Khi hover vào menu thì có border ở dưới chữ và chữ nó bị đẩy lên 2px (do border có độ dày 2px). Xin hỏi làm sao để chữ không bị đẩy lên ạ

5 CÂU TRẢ LỜI


Đã trả lời Oct 7th, 2019 7:15 a.m.
Đã được chấp nhận
+4

Bác có thể dùng thử cái này

    box-shadow: 0px -2px 0px red inset;
Chia sẻ
Avatar Minh Trí @vmtri96
Oct 7th, 2019 7:17 a.m.

đúng nó rồi bác. Mình dùng border nên nó bị đẩy lên. tks bác nhé

Avatar Dao Thai Son @dao.thai.son
Oct 7th, 2019 7:29 a.m.

@vmtri96 you're welcome 😅

Đã trả lời Oct 7th, 2019 7:12 a.m.
+3

bạn thử thêm thuộc tính:

box-sizing: border-box;

xem

Chia sẻ
Avatar Minh Trí @vmtri96
Oct 7th, 2019 7:15 a.m.

hình như có tác dụng với margin, padding thôi mà bác

Oct 7th, 2019 7:17 a.m.

@vmtri96 hoặc bạn có thể set thêm css cho mặc định lúc nào cx có cái border bottom như này:

border-bottom: 2px solid transperant;

Thì khi hover vào sẽ chỉ cần đổi màu thôi và chữ ko bị di chuyển

Đã trả lời Oct 7th, 2019 7:16 a.m.
+1

Cũng không biết được bạn viết css như thế nào nhưng đây là một ví dụ bạn có thể tham khảo và làm theo 😄 https://codepen.io/martinwolf/pen/eNNdme

Chia sẻ
Đã trả lời Oct 8th, 2019 2:20 a.m.
+1

Đơn giản nhất là tạo 1 border: 2px solid transperant; Sau đó khi hover vào thì sửa border-color là được.

Chia sẻ
Đã trả lời Oct 7th, 2019 7:19 a.m.
0

cám ơn mọi người, mình đã làm đc rồi. tks tất cả

Chia sẻ
Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí