<li> <ul>换行符

Question

所以我需要帮助的是,如何在a <li>和or 之后删除换行符<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