tôi có một jsfiddle bên dưới với ví dụ về các liên kết của tôi được hiển thị trong khối nội tuyến, những gì tôi không hiểu là tại sao có một số loại đệm hoặc lề ở đầu mỗi thẻ neo , có lẽ ai đó có thể giúp tôi, tôi không chắc chắn nếu tôi đã bỏ lỡ một cái gì đó nhưng tôi chỉ không thể dường như tìm hiểu lý do tại sao mà padding là có?đệm trái trên thẻ neo
Đây là mã html:
<div class="wrapper">
<header class="main-header">
<h1>blah blah blah</h1>
<nav class="main-nav">
<ul class="main-nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Get a Quote</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Đây là tất cả các mã css:
.wrapper {
width: 100%;
min-width: 960px;
}
.main-header {
position: relative;
width: 100%;
height: 60px;
background-color: #41a2cd;
}
.main-header > h1{
float: left;
margin: 11px 0 0 5px;
color: #073a4f;
}
.main-nav-links > li {
list-style: none;
display: inline-block;
}
.main-nav-links li > a {
text-decoration: none;
display: block;
color: #073a4f;
}
.main-nav-links > li {
border-right: 1px solid #45b1e1;
}
.main-nav-links li > a:hover {
background-color: #ffffff;
/*background-color: #50bae8;*/
}
An dễ dàng để hiểu, loại bỏ những phong cách và tìm ra sự khác biệt. – Praveen