Esrarlı, ben daha önce bu konuda rastlamak hiç, ama ben sadece bir site yapmaya başladı ettik ve üst gezinti güzel oynamıyor.
Her menü öğesi arasındaki boşluk küçük bir miktar istiyorum, ama benim <li>
elemanları ve benim IDE (Netbeans) benim <a>
elemanları, beyaz boşluk kayboluncaya arasında yeni çizgiler varsa Ben aynı hat üzerinde <li><a></a></li>
Tüm varsa, henüz iyi görünüyor. Ben kodu izlenim html göz ardı boşluk altında her zaman oldu.
Ben diğer metin editörleri sorunlara neden herhangi bir garip karakterleri için kontrol ettik ve hiçbir şey bulamıyorum.
İşte kod ...
Bu gibi menü doğru görünüyor ama kodu (Ben bu basit olduğunda gayet iyi görünüyor biliyorum, ama tek bir satırda bütün korkunç görünüyorsun kılan daha karmaşıklık ekleyerek gidiyorum) çirkin görünüyor:
<ul id="menu">
<li><a href="#">About</a></li>
<li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li>
<li><a href="<?php echo site_url("stats"); ?>">Stats</a></li>
<li><a href="#">Stats</a></li>
</ul>
Produces:
Bu gibi menü yanlış görünüyor ama kod iyi görünüyor:
<ul id="menu">
<li>
<a href="#">About</a>
</li>
<li class="active">
<a href="<?php echo site_url("tracklist"); ?>">Track List</a>
</li>
<li>
<a href="<?php echo site_url("stats"); ?>">Stats</a>
</li>
<li>
<a href="#">Stats</a>
</li>
</ul>
Produces:
Bunu ben yanlış yapıyorum basit bir şey olduğundan emin değilim ... ama kimse bana bu konuda biraz ışık tutabilir?
Uzun yazı (stackoverflow benim ilk) için üzgünüm.
Düzenle - Tam CSS ve HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
<a href="#">About</a>
</li>
<li class="active">
<a href="http://localhost/tracklist">Track List</a>
</li>
<li>
<a href="http://localhost/stats">Stats</a>
</li>
<li>
<a href="#">Stats</a>
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>