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

GIúp đỡ css

Chia sẻ
  • 156 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ẻ