问题描述
|
我试图实现我认为很简单的目标,但现实是残酷的。我有一个简单的清单
项目1
项目2
我正在尝试获得以下结果:当文本长于可用宽度并且浏览器将其环绕时,我希望它位于项目符号下方,即仅在项目符号所在的第一行应用缩进。列表项似乎呈现为块,所以有什么建议吗?
解决方法
您可以通过在列表中指定项目符号来在CSS上完成此操作:
像这样
ul{
list-style: disc inside none;
}
你可以在这里测试
, 尝试list-style-position:inside;表示“ 1”元素。更多信息http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。
, 尝试将列表内容包装在div中,如下所示:
<ul>
<li>
<div>
Item 1
</div>
</li>
<li>
<div>
Item 2
</div>
</li>
</ul>
并给您的ѭ3containing或包含元素固定宽度,如果您喜欢冒险,则给max-width
。
, 文字环绕在项目符号右侧的原因是浏览器将整个list-item元素呈现在项目符号右侧。它将始终将文本包装在包含文本的元素内。
最简单的解决方案是不使用内置的列表项目符号。
而是创建所需子弹的图像,然后使用float:left将其放在左上角。文本将环绕在文本周围,并为您提供所需的结果。
<style>
li { list-style-type:none; }
img{ float:left; }
</style>
<ul>
<li><img src=\'bullet\'>my short text</li>
<li><img src=\'bullet\'>my very very long text</li>
</ul>
其他一些要点:
由于不同的浏览器在列表的边距和页边距上有所不同,因此您应该设置它们:
(设置为您的首选保证金):
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项目符号为所有文本添加前缀。
或者,如果您的用户使用的是现代浏览器,请在Unicode字符前添加CSS。
但是,我现在还没有时间进行查找。今天晚些时候。