Html <li> <ul> 换行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10642815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<li> <ul> newline
提问by Sampson
So what I need help with, is how do I remove the newline after a <li>and or <ul>
所以我需要帮助的是如何在<li>和或之后删除换行符<ul>
This is my css:
这是我的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; }
and this is the html:
这是 html：
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc">is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
虽然只有一个在<ul id ="etc">那里，但一切都很好，但是如果有多个，它将创建一个新行并“堆叠”它们..是否可以使它们不堆叠，而只是从左到右？谢谢
EDIT:
编辑：
Demo : /removed/
演示：/删除/
回答by Sampson
You have a few options:
您有几个选择：
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
这将使您的所有列表项都向左浮动，而不会环绕，直到水平屏幕空间不再可用。或者，
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
这也会将您的元素并排放置，但将它们作为块级元素处理。如果您不关心块级样式，则可以使用直接内联显示：
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span>or <a>).
它将像对待任何其他内联元素（例如<span>或<a>）一样对待列表项。
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
列表项及其父级列表中还存在一些其他固有样式，您可能需要取消这些样式。一定要签出margin，和padding。
Demo: http://jsbin.com/iconud/edit#html,live
演示：http: //jsbin.com/iconud/edit#html,live
Look Out Ahead!
向前看！
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
当列表项并排放置时，您可能会发现它们之间存在难看的间隙。这是内联列表的常见问题。一种解决方案是删除关闭和打开列表项标签之间的换行符：
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
或者让它们全部内联，有点不太明显：
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
这对眼睛来说有点困难。使用 HTML，由于并不总是需要结束标记，您也可以省略结束标记（尽管这让我有点紧张）：
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
多个列表也内联！
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
从 OP 的一些评论来看，他们似乎不仅试图获得内联列表项，而且还试图列出自己。如果是这种情况，请将上述相同的规则应用于列表本身：
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
这里已经确定了两组规则，它们使用搜索 id 和标签的选择器。您可以通过将公共类应用于列表，或通过将选择器基于公共父元素来简化此操作。接下来是标记：
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
这会导致列表及其项目以水平方式显示。
回答by Rob Sedgwick
with some css
一些css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
- updated as comments: with display:block
- 更新为评论：带显示：块
回答by Adam Sweeney
ul li{ display:inline;}do the trick?
ul li{ display:inline;}做的伎俩？
回答by barro32
<li>by default is display:block;if you give it display:inline;or diplay:inline-block;that should remove the linebreak
<li>默认情况下是display:block;如果你给它display:inline;或者diplay:inline-block;应该删除换行符
回答by Peter Flannery
This is a basic example of horizontal UL's
这是水平 UL 的基本示例
HTML
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
??CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
?
?
?JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
?JSFiddle 示例：http: //jsfiddle.net/peterf/DEUBf/
回答by Maarten
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
另一种选择是在 ul 中设置 font-size: 0，然后在 li 标签中恢复所需的 font-size。我更喜欢这个，因为它包含在 ul 标签中，不需要像 clear:both 这样的进一步技巧，并且更好地解释了样式的意图（隐藏任何不在列表项中的内容）。
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}
