Question

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

我想在每个菜单项之间留出少量空白区域，但是当我的<li>元素和我的IDE（Netbeans）中的<a>元素之间有新行时，空格会消失，但如果我<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>

Answer 1

您提供的CSS似乎完全没问题，所以我猜测必须有一些其他规则影响您的链接。您能否为我们提供实时预览或完整样式表？

编辑：

似乎是“display：inline”如何折叠元素内容的问题，尽管我找不到任何证据。变化

#menu li {
  display: inline;
}

到

#menu li {
  display: inline-block;
}

或为其添加保证金：

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

要修复文本的对齐方式，我会继续并建议你浮动li。如果这是一个可怕的想法，请有人纠正我。添加

#menu {
  overflow: hidden;
}

#menu li {
  float: left;
}

遵守现有规则。

Answer 2

尝试设置li＆amp;的行高。标签为1em甚至0

#menu li, #menu a {
  line-height: 1em;
}

Answer 3

首先，这两个屏幕截图似乎是互换的，第一个在第二个代码片段中由空格引起的链接之间存在间隙。

这个新的白色空间崩塌物业可能会有所帮助。

#menu li{white-space-collapse:discard}

via：http://safalra.com/web-design/html-and-css/white-space-property/

如果这不起作用，则下一个选项是将<a>标记设置为阻止级别元素，将<li>标记设置为内联。

#menu li{display:inline}
#menu li a{
  display:inline-block
  padding: 5px;
  background-color: #932996;
  border-bottom: solid 1px #932996;
}
#menu li a:hover{
  border-bottom: solid 3px #FF0000;
}
#menu li.active a {
  background-color: #58065e;
}

Answer 4

您必须在父框上设置overflow: hidden，然后在position: relative上设置<li>：

ul {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 25px;
  margin: 5px 0;
  overflow: hidden
}

ul li {
  display: inline-block;
  padding: 19px 10px;
  text-align: center;
  position: relative
}

ul li::before {
  content: '';
  position: absolute;
  width: 400%;
  height: 1px;
  background: #f3f3f3;
  bottom: 0;
  right: -250px
}

Answer 5

所以似乎已经提供了针对性的答案，所以我想补充一点，根据经验，我总是使用normalize.css，这是一个确保正常的css库

您可以下载它或使用npm install normalize.css

<li>元素破坏布局后的新行（在代码中）</li>

5 个答案: