Làm thế nào để - Liên kết thanh điều hướng có chiều 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 chiều rộng bằng nhau
Tạo một thanh điều hướng đáp ứng
Bước 1) Thêm HTML:
Thí 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:
Thí 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
*/
}
}
Các liên kết điều hướng có chiều rộng bằng nhau với các biểu tượng
Thí dụ
Mẹo: Đi tới Hướng dẫn CSS Navbar của chúng tôi để tìm hiểu thêm về các thanh điều hướng.