所以,我有这样的简单项目符号列表:
<ul>
<li>Apple. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam, egestas congue magna dictum ut. Fusce nec tortor ut erat ultrices fermentum. Proin dolor nibh, gravida eu mi sed, imperdiet venenatis est.</li>
<li>Orange. Integer eget velit dolor. Aenean a metus at purus convallis porttitor. Etiam hendrerit leo eu elementum tempor. Sed at semper magna. Sed tincidunt, mi at auctor hendrerit, nibh tellus lobortis dui, nec volutpat nulla lacus adipiscing erat. In quis mi at lorem ullamcorper consectetur. </li>
</ul>
通常会显示如下:
- 苹果。 Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam,egestas congue magna dictum ut。 Fusce nec totortor uterat ultrices发酵。 Proin dolor nibh,妊娠 eu mi sed,imperdiet venenatis est。
- 橙子。整数 eget velit dolor。 Aenean a metus at purus convallis porttitor。 Etiam Hendrerit leo eu Elementum tempor。 Sed at semper magna。 Sed Tincidunt,我在 auctor hendrerit,nibh Tellus lobortis dui,nec volutpat nulla lacus adipiscingerat。 In quis mi at lorem ullamcorper consectetur。
但是,我需要更改所有行缩进except第一行所以它看起来有点像这样:
- 苹果。 Lorem ipsum dolor sat amet,consectetur adipiscing elit。 Vivamus venenatis elit turpis, vel facilisis risus pellentesque nec. Curabitur dapibus libero diam,egestas congue magna dictum ut。 Fusce nec totortor uterat ultrices发酵。 Proin dolor nibh,妊娠 eu mi sed,imperdiet venenatis est。
- 橙子。整数 eget velit dolor。 Aenean a metus at purus convallis porttitor。 Etiam hendrerit leo eu 元素时间。 Sed at semper magna。 Sed Tincidunt,我在 auctor hendrerit,nibhtellus dui,nec volutpat nulla lacus adipiscing 时代。 In quis mi at lorem ullamcorper consectetur。
但无需更改外部 DIV 容器尺寸、填充、边距或其他任何内容。仅在 UL 或 OL 或 LI 标签上设计样式。我在网上看到的只是如何更改第一个缩进,如果结合DIV填充尺寸更改可以用来完成上述问题,但它非常复杂,因为我无法控制HTML代码。我什至不知道将来HTML代码是否会包含DIV。所以我只能把CSS交给OL、UL、LI。我如何使用纯 CSS 来实现这一点?
您可以添加填充li
,然后使用负数text-indent
值来替换第一行的填充。
jsFiddle 示例 http://jsfiddle.net/4VgJv/
li {
padding-left:30px;
text-indent:-30px;
}
这是我能想到的唯一解决方案。我尝试使用:first-line https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3afirst-line,但这在这种情况下并不起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)