文本对齐无序列表项

Question

我想知道是否有办法让无序列表项的文本显示为标准光盘/点列表项图标旁边的“列”？制作了一对截图：

这是在列表项（li）中使用带有一些文本的标准无序列表时的样子：

这就是我想要的样子：

这可能没有任何图像/ div黑客吗？ ;-)我已经四处搜索，看看是否有任何标准的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

在＆lt; ul＆gt;下使用带有open（＆lt; li＆gt;）和close（＆lt; / li＆gt;）标记的文本环绕就足够了标签

例如，

<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 repreptderit 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
    
• 这是列表项 - 4

Answer 5

添加此

ul {
  display:inline-block;
}

到你的css代码。