Question

嘿有没有办法让浏览器忽略源中的换行符？

<div id="navbar">
    <div id="navbar-container">
        <ul>
            <li>HOME</li>
            <li>TUTORIALS</li>
            <li>BLOG</li>
            <li>FORUMS</li>
            <li>LINKS</li>
            <li>&nbsp;</li>
        </ul>
    </div>
</div>

#navbar {
    background:#FFF;
    width:940px;
    margin:auto;
    border-radius: 10px 10px;
    -webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
    margin:auto;
}
#navbar-container ul {
    list-style:none;
    text-align:center;
    display:block;
    width:auto;
    padding:0;
    margin:0;
}
#navbar-container li{
    list-style:none;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    padding:0 7px 0 10px;
    margin:0;
    white-space:nowrap;
}
#navbar-container li:hover{
    color:#FFF;
    background:#000;
    border-left:3px solid black;
    display:inline-block;
    font-family:"Arial", sans-serif;
    font-size:2em;
    margin:0;
    padding:0 7px 0 10px;
}

它在每个LI之间放置一个小空间，我已将其设置为水平排列，我可以删除源代码中的换行符，但id不喜欢。

Answer 1

你可以浮动它们（left或right），或者你可以注释掉这些空格：

<ul>
  <li>...</li><!--
  --><li>...</li>
</ul>

或者只是将标签打开，直到下一行。

<ul>
  <li>...</li
  ><li>...</li
  ><li>...</li>
</ul>

Answer 2

从列表项没有结束标记的日子开始，IE似乎就是这样做的。一种常见的方法是关闭＆gt;在下一行，即

<ul>
        <li>HOME</li
        ><li>TUTORIALS</li
        ><li>BLOG</li
        >etc...

Answer 3

所有浏览器都应该完全忽略空格。是否有特定的浏览器给您带来麻烦？

尝试：

li { margin: 0; padding: 0 }

Answer 4

我想知道同样的事情，对我有用的是：

li { display: table-cell; }

忽略所有休息时间，现在我的菜单按钮就在彼此旁边。

您可以在我的音乐网站上看到一个实时示例：http://www.yanike.tk

我在UL LI上使用CSS Sprite作为我的导航菜单（家庭，媒体......）。

HTML / CSS - 从LI代码中的换行符中删除空格

4 个答案: