Question

所以我需要帮助的是，如何在<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">中只有一个存在，但如果有多个，它会创建一个新行并“堆叠”它们...是否可以使它们不是堆栈，只是从左到右？感谢

编辑：

演示：/删除/

Answer 1

您有几个选择：

#ranks li {
  float: left;
}

这会将所有列表项浮动到左侧，而不会换行，直到水平屏幕空间不再可用。可替代地，

#ranks li {
  display: inline-block;
}

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

#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的一些评论，似乎他们可能不仅试图获取内联列表项，而且还列出自己的列表项。如果是这种情况，请将相同的上述规则应用于列表本身：

#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

Answer 2

有一些css

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

更新为评论：使用display：block

Answer 3

ul li{ display:inline;}诀窍？

Answer 4

默认情况下，

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

Answer 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/

Answer 6

另一种选择是在ul中设置font-size：0，然后在li标签中恢复所需的字体大小。我更喜欢这个，因为它包含在ul标签中，不需要像clear那样的更多hack：两者，并且更好地解释了样式的意图（隐藏不在列表项中的任何内容）。

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

<li> <ul>换行</ul> </li>

6 个答案:

向前看！

内联多个列表！