Question

例如：

<ul>
    <li>a</li>
    <li>b</li>
</ul>

默认情况下会生成：ab 但我想：

a
b

我该怎么做？

Answer 1

请记住，HTML是一种标记语言，它定义了内容的语义（含义）。使列表水平显示的问题是表示（显示）问题。因此，您正在寻找的解决方案将涉及CSS。

通过floating li元素，我们可以达到您想要的效果：

ul li {
    float: left;
}

您还可以尝试将li元素转换为内联或内联块元素：

ul li {
    display: inline-block;
}

请注意与使用这些CSS属性相关联的其他效果。看看这些关于这些属性如何工作的文章：

Answer 2

默认情况下，每个新列表项都将在新行上呈现。

由于您所看到的行为不是您所看到的标记（或CSS）中的错误，或者您的CSS具有不同的样式。

首先使用http://validator.w3.org/

等验证程序检查并修复任何标记错误

然后确定导致您的项目并排显示的CSS规则（Firebug是一个很好的工具）并覆盖或删除它们。它们可能与display或float属性相关。

Answer 3

您似乎混淆了默认布局和您想要的布局。默认情况下，无序列表将显示为：

一个
B'/ LI>

如果您想要彼此显示项目，您可以“浮动”项目或显示它们“内联”。哪一个是“更好”的解决方案将取决于您实际想要实现的目标以及项目包含的内容。

此外，您可能需要设置列表的边距和填充，并将其项目设置为零，并使用list-style删除项目符号

示例：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin: 0;
  padding: 0;
  float: left;
}

或

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

这些CSS规则将影响HTMl文档中的所有无序列表。您需要使用id或类选择器将其限制为一个列表或特定列表。

Answer 4

默认情况下应该生成

一个
B'/ LI>

您必须应用重置样式表。要让它显示您想要的样子，您可能需要添加到样式表


li {
    display: list-item;
    list-style-type: none;
    padding-left: 0;
}

然后应该看起来就像你在问题中说的那样。

Answer 5

您可以像设置任何其他HTML元素一样设置<ul>和<li>项的样式。您还可以设置其他元素的样式以像列表一样工作。它们与其他元素之间的唯一区别是它们的默认样式。

因此，如果您使用float:left;或display:inline;设置样式，请将它们设为零padding和margin，并将list-style设置为无，您可以让他们几乎以你喜欢的方式展示。

希望有所帮助。

Answer 6

不是浮动列表项（“li”元素），而是将它们显示为内联（默认为块）： display: inline;

这是一个例子


<html>
<head><title>xxx</title>
</head>
<style>
li
{
    textdecoration: none;
    display: inline;
}
</style>
<body>
    <ul>
    <li>one</li>
    <li>two</li>
    </ul>
</body>
</html>

html <ul>：我可以指定它是水平还是垂直排列？</ul>

6 个答案: