<li> <ul> 换行符答案

【问题标题】：<li> <ul> newline<li> <ul> 换行符
【发布时间】：2012-05-17 20:11:43
【问题描述】：

所以我需要帮助的是如何在<li> 和或<ul> 之后删除换行符

这是我的 CSS：

    #ranks li {
    background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; } 
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }

这是html：

<ul id="ranks"><li class="sprite-admin"></li></ul>

当只有一个<ul id ="etc"> 存在时，这一切都很好，但是如果有多个，它将创建一个新行并“堆叠”它们.. 是否可以让它们不堆叠，然后向左走对吗？谢谢

编辑：

演示：/removed/

【问题讨论】：

我对您的问题感到困惑，在您的演示中，您希望图片位于用户名下方，但您问的是如何将它们并排放置

标签： html css newline

【解决方案1】：

你有几个选择：

#ranks li {
  float: left;
}

这会将您的所有列表项浮动到左侧，不换行，直到水平屏幕空间不再可用。或者，

#ranks li {
  display: inline-block;
}

这也将您的元素并排放置，但将它们作为块级元素处理。如果您不关心块级样式，则可以使用直接内联显示：

#ranks li {
  display: inline;
}

这会将列表项视为任何其他内联元素（例如<span> 或<a>）。

列表项及其父列表中还存在一些其他固有样式，您可能需要取消这些样式。请务必查看margin 和padding。

演示：http://jsbin.com/iconud/edit#html,live

向前看！

当您的列表项并排放置时，您可能会发现它们之间存在难看的间隙。这是内联列表的常见问题。一种解决方案是删除关闭和打开列表项标签之间的换行符：

<ul id="ranks"><li>
  Index</li><li>
  Contact</li><li>
  Portfolio</li>
</ul>

或者将它们全部内联，稍微不易辨别：

<ul id="ranks">
  <li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>

这对眼睛来说有点难。对于 HTML，由于并不总是需要结束标记，因此您也可以不使用结束标记（虽然这让我有点紧张）：

<ul id="ranks">
  <li>Index
  <li>Contact
  <li>Portfolio
</ul>

也可以内联多个列表！

从一些 OP 的 cmets 看来，他们可能不仅试图将列表项内联，而且还会列出它们自己。如果是这种情况，请将上述相同的规则应用于列表本身：

#ranks,
#specs {
  margin: 0;
  padding: 0;
  display: inline-block;
}
#ranks li,
#specs li {
  display: inline-block;
  border: 1px solid #CCC;
  padding: 5px 10px;
}

这里已经确定了两组规则，使用选择器搜索 id，然后是标签。您可以通过将一个公共类应用于列表，或将选择器基于一个公共父元素来简化这一点。接下来是标记：

<ul id="ranks">
  <li>Index</li>
  <li>Contact</li>
  <li>Portfolio</li>
</ul>

<ul id="specs">
  <li>Foo</li>
  <li>Bar</li>
</ul>

这会导致两个列表及其项目以水平方式显示。

演示：http://jsbin.com/iconud/2/edit

【讨论】：

你也可以使用css列，但只支持较新的浏览器，而且在某些情况下不够灵活，所以浮动或内联（-block）可能是更好的选择
@JoshuaRogers 您页面上的哪个示例提供了最好的测试用例？我可以尝试直接使用您的代码，看看哪种解决方案最有效。另外，您是否也希望 ul 元素并排放置？
@JoshuaRogers 我没有看到任何关于“snorlax”、“admin”或“coder”的信息。
好的，将display: inline-block添加到#ranks。
@JoshuaRogers 很高兴我能帮上忙。请考虑接受此答案以完成此问题，并奖励我们双方的声誉。

【解决方案2】：

一些CSS

 <style type="text/css">
 #ranks li { display:block; float:left; }
</style>

更新为 cmets：带显示：块

【讨论】：

如果您的问题是如何从左到右呈现“li”元素，这就是您的答案。就像许多其他人回答的那样。

【解决方案3】：

ul li{ display:inline;} 成功了吗？

【讨论】：

你因为没有 id 而有点懒惰。应该类似于#ranks li{display:inline;}

【解决方案4】：

<li> 默认为display:block; 如果你给它 display:inline; 或 diplay:inline-block; 应该删除换行符

【讨论】：

其实<li>默认是display: list-item，不是block。

【解决方案5】：

这是一个水平 UL 的基本示例

HTML

<ul id="list">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>
<span class="clearFloats">

CSS

.item {
    float: left;
}

.clearFloats {
    clear: both;   
}

JSFiddle 示例：http://jsfiddle.net/peterf/DEUBf/

【讨论】：

【解决方案6】：

另一种选择是在 ul 中设置 font-size: 0，然后在 li 标签中恢复所需的字体大小。我更喜欢这个，因为它包含在 ul 标记中，不需要像 clear:both 这样的进一步技巧，并且更好地解释了样式的含义（隐藏列表项之外的任何内容）。

ul {
    list-style-type: none;
    font-size: 0;
}
li {
    display: inline-block; /* Or inline, as you like */
    font-size: 16px;
}

【讨论】：