奇怪的是,我之前从未遇到过这个问题,但是我刚刚开始制作一个网站,并且顶部导航效果不佳.
我希望每个菜单项之间都有少量空白,但是当我的< li>之间有新行时,元素和我的< a>在我的IDE(Netbeans)中的空白元素消失了,但是如果我有< li< a< / a< / li>都在同一条线上.我总是在印象中html忽略了代码中的空白.
我检查了是否有其他字符编辑器中引起问题的奇怪字符,却找不到任何东西.
这是代码…
像这样的菜单看起来很正确,但是代码看起来很丑陋(我知道它很简单时看起来很好,但是我要增加更多的复杂性,使它看起来很糟糕).
<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>
产生：
correct http://img689.imageshack.us/img689/6628/screenshot20100618at000.png
<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>
产生：
wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
我敢肯定,这是我做错的简单事情,但是有人可以帮我一下吗？
抱歉,冗长的帖子(我的第一个关于stackoverflow的帖子).
编辑-完整的CSS和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>
最佳答案
您提供的CSS似乎完全没问题,所以我想肯定还有其他规则会影响您的链接.您能否为我们提供实时预览或完整的样式表？
原文链接：https://www.f2er.com/html/530684.html编辑：
似乎与“显示：内联”如何折叠元素内容有关,尽管我找不到任何证明.更改
#menu li {
display: inline;
}
至
#menu li {
display: inline-block;
}
或添加边距：
#menu li {
display: inline;
margin-right: 5px;
}
要修正文本的对齐方式,我将继续建议您浮动lis.如果这是一个可怕的主意,请有人纠正我.加
#menu {
overflow: hidden;
}
#menu li {
float: left;
}
遵守您现有的规则.
