html – >换行符

所以我需要帮助的是,如何在< 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”>是有,但如果有多个,它将创建一个新行并’堆叠’它们..是否有可能使它们不堆叠,只是从左到右？
谢谢

编辑：

演示：/删除/

@H_301_18@解决方法

你有几个选择：

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

这导致列表及其项目以水平方式显示.

演示：http://jsbin.com/iconud/2/edit

html – >换行符

猜你在找的HTML相关文章