Yêu cầu thg 10 7, 2019 7:12 SA 151 0 5
  • 151 0 5
+2

GIúp đỡ css

Chia sẻ
  • 151 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 thg 10 7, 2019 7:15 SA
Đã đượ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
thg 10 7, 2019 7:17 SA

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

Avatar Son Dao Thai @dao.thai.son
thg 10 7, 2019 7:29 SA

@vmtri96 you're welcome 😅

Đã trả lời thg 10 7, 2019 7:12 SA
+3

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

box-sizing: border-box;

xem

Chia sẻ
Avatar Minh Trí @vmtri96
thg 10 7, 2019 7:15 SA

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

thg 10 7, 2019 7:17 SA

@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 thg 10 7, 2019 7:16 SA
+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 thg 10 8, 2019 2:20 SA
+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 thg 10 7, 2019 7:19 SA
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í