文本对齐无序列表项

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

你可以简单地像这样编码：

超文本标记语言

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