所以我需要帮助的是,如何在< 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”>是有,但如果有多个,它将创建一个新行并’堆叠’它们..是否有可能使它们不堆叠,只是从左到右？
谢谢
编辑：
演示：/删除/
解决方法
你有几个选择：
#ranks li {
float: left;
}
这会将所有列表项浮动到左侧,而不会换行,直到水平屏幕空间不再可用.或者,
#ranks li {
display: inline-block;
}
这也将你的元素并排放置,但将它们作为bock级元素处理.如果您不关心块级样式,可以使用直接内联显示：
#ranks li {
display: inline;
}
这将像处理任何其他内联元素一样处理列表项(例如< span>或< a>).
列表项目中还存在一些其他固有样式,以及它们可能需要取消的列表父项.一定要检查边距和填充.
演示：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>
这导致列表及其项目以水平方式显示.
