6
Tôi muốn tạo một thanh điều hướng có hình ảnh ở mỗi đầu để làm cho nó trở nên tinh khiết.Tại sao nền hình ảnh của tôi biến mất trên phao: trái?
Vì vậy, tôi đã tạo HTML và CSS bên dưới và nó hoạt động rất tốt. Các mục menu của tôi nằm trong danh sách ul/li.
Khi tôi tạo kiểu danh sách để đặt tất cả các mục trên cùng một dòng, hình ảnh trên đầu sẽ biến mất. Có chuyện gì thế? Làm thế nào để tôi sửa chữa nó?
Thủ phạm là nổi: trái; phía dưới.
--- test.html ---
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header-usernav" class="span-6 last large">
<div id="header-usernav-leftside"><div id="header-usernav-rightside">
<ul>
<li>Register</li>
<li>Signin</li>
<li>Signout</li>
</ul>
</div></div>
</div>
</div>
</body>
</html>
--- test.CSS ---
#container #header-usernav {
background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
height: 28px;
background-repeat: repeat;
}
#container #header-usernav-leftside {
background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
background-position: top left;
background-repeat: no-repeat;
}
#container #header-usernav-rightside {
background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
background-position: top right;
background-repeat: no-repeat;
}
#container #header-usernav ul {
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
}
#container #header-usernav li {
float: left;
padding: 0;
margin: 0 0.2em;
}
Các hình ảnh khác nhau để html/css có thể được sao chép dán vào kiểm tra nó.
Thỏa thuận là gì? Tôi đang làm gì sai?
Điều này dường như không hoạt động trong Safari và Firefox trên Mac OS. http://jsbin.com/ikige. Thanh toán bù trừ phải nằm ngay sau UL –
Lưu ý và sửa chữa. Cảm ơn Chetan. – Sampson
Trong khi kỹ thuật này hoạt động, hầu hết mọi người sẽ sử dụng một số biến thể của clearfix những ngày này, vì nó không yêu cầu thêm đánh dấu thêm - xem Anwsers của Chetan hoặc Sasha. –