在CSS重置之后,li中的第二行从子弹开始

Question

ul使用CSS-reset后我的-list 遇到了一些问题.

当文本中的文本li很长并且它会断开到第二行时,文本从项目符号开始.我希望它以与子弹右侧文本相同的边距/填充开始.

有点难以解释,但如果你看一下example-image.左图是今天的列表."motta varsel [...]"从子弹开始,但我希望看到右边的图片.

我怎么能用CSS做到这一点？我认为有一些非常简单的事情我忽略了,但我无法弄清楚是什么.谷歌搜索也没有返回任何有用的东西.

Answer 1

该li标签有一个叫做财产list-style-position.这会使您的项目符号在列表内部或外部.默认情况下,它设置为inside.这使你的文字环绕它.如果将其设置为outside,则li标记的文本将对齐.

这样做的缺点是你的子弹不会与外面的文本对齐ul.如果要将其与其他文本对齐,可以使用边距.

ul li {
    /*
     * We want the bullets outside of the list,
     * so the text is aligned. Now the actual bullet
     * is outside of the list’s container
     */
    list-style-position: outside;

    /*
     * Because the bullet is outside of the list’s
     * container, indent the list entirely
     */
    margin-left: 1em;
}

编辑2014年3月15日 看到人们仍然从谷歌进来,我觉得最初的答案可能会有所改善

• 改变了代码块,以提供正好溶液
• 将缩进单位更改为em's
• 每个属性都应用于ul元素
• 好评:)

Answer 2

这是一个很好的例子 -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

工作演示:http://jsfiddle.net/d9VNk/

Answer 3

我是第二个Dipaks的回答,但通常只是文本缩进就足够了,因为你可能/可能不会定位ul以获得更好的布局控制.

ul li{
text-indent: -1em;
}