php->元素中断布局后的新行(在代码中)

奇怪的是,我之前从未遇到过这个问题,但是我刚刚开始制作一个网站,并且顶部导航效果不佳.

我希望每个菜单项之间都有少量空白,但是当我的< 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似乎完全没问题,所以我想肯定还有其他规则会影响您的链接.您能否为我们提供实时预览或完整的样式表？

编辑：

似乎与“显示：内联”如何折叠元素内容有关,尽管我找不到任何证明.更改

#menu li {
  display: inline;
}

至

#menu li {
  display: inline-block;
}

或添加边距：

#menu li {
  display: inline;
  margin-right: 5px;
}

要修正文本的对齐方式,我将继续建议您浮动lis.如果这是一个可怕的主意,请有人纠正我.加

#menu {
  overflow: hidden;
}

#menu li {
  float: left;
}

遵守您现有的规则.

php->元素中断布局后的新行(在代码中)

相关推荐