我试图实现一件我本以为很简单的事情,但现实是残酷的。我有一个简单的列表:
- 项目1
- 项目2
我想要达到以下的效果:当文本超过可用宽度并被浏览器换行时,我希望它能够出现在项目符号下面,即仅在第一行(即项目符号所在的行)应用缩进。似乎列表项被呈现为块级元素,有什么建议吗?
我试图实现一件我本以为很简单的事情,但现实是残酷的。我有一个简单的列表:
我想要达到以下的效果:当文本超过可用宽度并被浏览器换行时,我希望它能够出现在项目符号下面,即仅在第一行(即项目符号所在的行)应用缩进。似乎列表项被呈现为块级元素,有什么建议吗?
尝试使用 list-style-position: inside; 属性来设定 <li>
元素的样式。更多信息请参考http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position。
<ul>
<li>
<div>
Item 1
</div>
</li>
<li>
<div>
Item 2
</div>
</li>
</ul>
给你的<ul>
或包含元素设定一个固定宽度,或者如果你感觉冒险,可以用max-width
。
文本右侧换行的原因是浏览器将整个列表项元素呈现在符号的右侧。它将始终在包含文本的元素内部换行。
最简单的解决方案是不使用内置的列表项符号。
相反,创建您喜欢的符号图像,并使用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}