Cách thực hiện - Liên kết thanh điều hướng có độ rộng bằng nhau
Tìm hiểu cách tạo thanh điều hướng với các liên kết điều hướng có chiều rộng bằng nhau.
Menu có chiều rộng bằng nhau
Tạo thanh điều hướng đáp ứng
Bước 1) Thêm HTML:
Ví dụ
<!-- The navigation menu -->
<div class="navbar">
<a class="active" href="#">Home</a>
<a href="#">Search</a>
<a href="#">Contact</a>
<a href="#">Login</a>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* Style the navigation menu */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* Navigation links */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* Four equal-width links. If you have two links, use 50%, and
33.33% for three links, etc.. */
text-align: center; /* If you want
the text to be centered */
}
/* Add a background color on mouse-over
*/
.navbar a:hover {
background-color: #000;
}
/* Style the current/active link */
.navbar a.active {
background-color: #04AA6D;
}
/* Add
responsiveness - on screens less than 500px, make the navigation links appear
on top of each other, instead of next to each other */
@media screen and
(max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* If you want the text to be left-aligned on small screens
*/
}
}
Hãy tự mình thử »Liên kết điều hướng có chiều rộng bằng nhau với các biểu tượng
Mẹo: Hãy truy cập Hướng dẫn về Thanh điều hướng CSS của chúng tôi để tìm hiểu thêm về các thanh điều hướng.