<li> <ul> newline

Question

<li> <ul> newline

8

我需要帮助的是，如何去掉<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/

- user1352480

我对你的问题感到困惑，在你的演示中，你想让图片位于用户名下方，但你正在问如何让它们并排。 - Adam Sweeney

6个回答

7

使用一些CSS

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

更新为注释：使用display:block

- Rob Sedgwick

如果你的问题是如何将“li”元素从左到右呈现，那就是你的答案。就像许多其他人已经回答过的一样。 - Rob Sedgwick

1

ul li{ display:inline;} 能解决问题吗？

- Adam Sweeney

你在id的缺失上有点懒惰了。应该像这样：#ranks li {display: inline;} - Adam Sweeney

0

这是一个水平无序列表的基本示例。

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/

- Peter

0

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

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

- Maarten

0

<li> 默认情况下是 display:block;，如果你给它 display:inline; 或者 diplay:inline-block; 那么就会移除换行符

- barro32

3

默认情况下，<li> 标签的 display 属性是 list-item，而非 block。 - rid

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

你有几个选择：

#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>

多个列表也可以同时内联！

从一些评论中可以看出，问题提出者可能不仅想将列表项进行内联，还想将列表本身内联。如果是这种情况，将与上述规则相同的方法应用于列表本身：

#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