无序列表项的文本对齐答案

【问题标题】：Text align of an unordered list item无序列表项的文本对齐
【发布时间】：2012-07-04 22:08:22
【问题描述】：

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

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

这就是我想要的样子：

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

提前非常感谢！

一切顺利，

博

【问题讨论】：

嘿，现在检查一下我想你想要这个tinkerbin.com/8DhTi5M2
天啊！！我的 ul 上有这个设置：list-style-position:inside;删除产生差异的 ;-)

标签： html css html-lists text-alignment

【解决方案1】：

添加这个

ul {
  display:inline-block;
}

到您的 css 代码。

【讨论】：

【解决方案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;
}

【讨论】：

感谢 Rohit，我在我的 css 中发现了缺陷（很抱歉没有直接分享它） - 请参阅我对我的帖子的评论 ;-) 在 li 上添加宽度顺便说一句是个好主意。再次感谢！ :-)

【解决方案3】：

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

此 CSS 代码可能会对您有所帮助：

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

【讨论】：

【解决方案4】：

list-style-position 是您要查找的属性。它适用于所有浏览器。（详情请参阅MDN）

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

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

【讨论】：

我认为这是最好的解决方案，这样就不需要为项目提供固定宽度，这在大多数情况下是不可能的。

【解决方案5】：

在

) 和 closed(

例如，

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

【讨论】：