将文本包装到项目符号右侧的原因是浏览器将整个list-item元素呈现在项目符号的右侧。它将始终将文本包装在包含文本的元素中。
最简单的解决方案是不使用内置列表项目项目符号。
取而代之的是创建一个你喜欢的子弹的图像并使用float:left将它放在左上角。文本将围绕它并给你你想要的结果。
li { list-style-type:none; }
img{ float:left; }
- my short text
- my very very long text
的其他一些观点: 由于不同的浏览器上的填充不同,名单的利润,你应该将它们设置: (设为您的首选保证金):
ul { padding:0; margin:30px }
ul li{ padding:0; margin:0 }
而且,它是更好使用与背景色是您的首选子弹元素:
span.bullet {float:left; height:10px; width:10px; background:url(bullet.gif) no-repeat}
最后,一个更好的想法是完全不使用图像 - 但而不是使用unicode项目符号为所有文本加上前缀。 或者,如果您的用户使用现代浏览器,请在CSS中添加unicode字符。 但是,我现在没有时间来查看这个。 Praps今天晚些时候。