8

所以我需要帮助的是如何在<li>and 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">，但是如果有多个，它将​​创建一个新行并“堆叠”它们..是否可以让它们不堆叠，而从左到右？谢谢

编辑：

演示：/已删除/

4

6 回答 6

16

你有几个选择：

#ranks li {
  float: left;
}

这会将您的所有列表项浮动到左侧，不换行，直到水平屏幕空间不再可用。或者，

#ranks li {
  display: inline-block;
}

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

#ranks li {
  display: inline;
}

它将像任何其他内联元素（例如<span>or <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

于 2012-05-17T20:14:53.460 回答
7

有一些CSS

 <style type="text/css">
 #ranks li { display:block; float:left; }
</style>
  • 更新为评论：显示：块
于 2012-05-17T20:14:42.777 回答
1

ul li{ display:inline;}做这个把戏？

于 2012-05-17T20:14:49.500 回答
0

This is a basic example of horizontal UL's

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;   
}

​</p>

​JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/

于 2012-05-17T20:22:00.407 回答
0

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

ul {
    list-style-type: none;
    font-size: 0;
}
li {
    display: inline-block; /* Or inline, as you like */
    font-size: 16px;
}
于 2013-10-01T20:19:31.527 回答
0

<li>默认情况下，display:block; 如果你给它display:inline;或者diplay:inline-block;应该删除换行符

于 2012-05-17T20:14:59.170 回答