Asked Oct 7th, 2019 7:12 a.m. 147 0 5
  • 147 0 5
+2

GIúp đỡ css

Share
  • 147 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 ANSWERS


Answered Oct 7th, 2019 7:15 a.m.
Accepted
+4

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

    box-shadow: 0px -2px 0px red inset;
Share
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é

+1
| Reply
Share
Avatar Dao Thai Son @dao.thai.son
Oct 7th, 2019 7:29 a.m.

@vmtri96 you're welcome 😅

0
| Reply
Share
Answered Oct 7th, 2019 7:12 a.m.
+3

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

box-sizing: border-box;

xem

Share
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

0
| Reply
Share
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

0
| Reply
Share
Answered 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

Share
Answered 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.

Share
Answered 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ả

Share
Viblo
Let's register a Viblo Account to get more interesting posts.