无序列表项的文本对齐方式

Question

我想知道是否有办法使无序列表项中的文本以“列”的形式出现在标准圆点列表项图标的旁边？ 我拍了一对截图：

这是使用带有某些列表项（li）内文本的标准无序列表时的外观：

这是我想要的外观：

这是否可能不使用任何图像/ div hack呢？;-) 我已经搜索过了，看看是否有任何标准CSS设置，但似乎没有找到任何内容。

非常感谢！

一切顺利，

Bo

- bomortensen

---

嘿，现在看看这个，我认为你想要这个：http://tinkerbin.com/8DhTi5M2 - Rohit Azad Malik

哎呀！我在我的ul上设置了list-style-position:inside;，移除它就解决了问题；-) - bomortensen

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 是默认值。你可能在其他地方覆盖了它。

- KevinH

---

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

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;
}

- Rohit Azad Malik

---

谢谢Rohit，我找到了我的css中的缺陷（很抱歉没有第一时间分享）。请看我在我的帖子中的评论。顺便说一下，在li上添加宽度是一个好主意。再次感谢！ :-) - bomortensen

Answer 3

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

下面的CSS代码可能会对你有所帮助：

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

- user1501231

Answer 4

只需在 <ul> 标签下使用开放(<li>)和关闭(</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。Excepteur sint occaecat cupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est laborum
• 这是列表项-4

- Sakthivel

Answer 5

添加这个

ul {
  display:inline-block;
}

返回你的 CSS 代码。

- paddotk