html - 无序列表项的文本对齐

Question

我想知道是否有任何方法可以使无序列表项的文本在标准圆盘/点列表项图标旁边显示为“列”？做了一对截图：

这是在列表项 (li) 中使用带有一些文本的标准无序列表时的外观：

这就是我希望它看起来的样子：

这可能没有任何图像/ div hacks吗？;-) 我四处搜索，看看是否有任何标准的 CSS 设置，但我似乎找不到任何东西。

提前非常感谢！

祝一切顺利，

博

Answer 1

list-style-position是您正在寻找的财产。它适用于所有浏览器。（有关详细信息，请参阅MDN ）

ul {
   list-style-position: outside;
   /* You may want to add an additional padding-left: */
   padding-left: 1.5em;
}

但实际上outside它是默认值。您可能会在其他地方覆盖它。

Answer 2

您可以像这样简单地编写代码：

HTML

  <ul>
    <li>Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>

CSS

ul{
  margin:0;
  padding:0 20px;
} 
ul li    {
  padding:0;
  width:150px;
  background:red;
  margin:10px 0;
}

Answer 3

我认为左侧的浮动列表项是使它们显示为列的最佳解决方案。

此 CSS 代码可以帮助您：

<style type="text/css">
    ul > li {
        margin: 0 10px;
        width: 150px;
        float: left;
    }
</style>

Answer 4

在 <ul> 标签下使用带有 open(<li>) 和 closed(</li>) 标签的文本环绕就足够了。

例如，

<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li>
    <li>This is list item - 2</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</li>
    <li>This is list item - 4</li>
</ul>

输出将是，

• Lorem ipsum dolor sit amet，consectetur adipiscing elit，sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。
• 这是列表项 - 2
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum
• 这是列表项 - 4

Answer 5

添加这个

ul {
  display:inline-block;
}

到你的 CSS 代码。