如何更改除项目符号列表或非项目符号列表中第一行以外的所有行的缩进?

时间:2013-12-11 04:41:33

标签: html css indentation

所以,我有这样简单的子弹列表:

<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坐下来,精致的adipistur 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。
  • 橙色。整数eget velit dolor。 Aenean在purus convallis porttitor的一个metus。 Etiam hendrerit leo eu elementum tempor。 semper magna的Sed。 Sed tincidunt,mi at auctor hendrerit,nibh tellus lobortis dui,nec volutpat nulla lacus adipiscing erat。在quore mi at lorem ullamcorper consectetur。

但是,我需要更改第一行之外的所有行缩进,因此它看起来有点像这样:

  • 苹果。 Lorem ipsum dolor坐下来,精致的adipistur 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。
  • 橙色。整数eget velit dolor。 Aenean在purus convallis porttitor的一个metus。 Etiam hendrerit leo eu elementum tempor。 semper magna的Sed。 Sed tincidunt,mi at auctor hendrerit,nibh tellus lobortis dui,nec volutpat nulla lacus adipiscing erat。在quore mi at lorem ullamcorper consectetur。

但不改变外部DIV容器尺寸,填充或边距等等。仅在UL或OL或LI标签上设置样式。我在网上看到的只是如何更改第一个缩进,如果与DIV填充维度更改结合使用,可以用来完成上面的问题,但由于我无法控制HTML代码,所以它非常复杂。我甚至不知道HTML代码是否会包含DIV。所以我只能将CSS提供给OL,UL和LI。我怎样才能使用纯CSS实现这个目标?

1 个答案:

答案 0 :(得分:3)

您可以向li添加填充,然后使用负text-indent值替换第一行的填充。

jsFiddle example

li {
    padding-left:30px;
    text-indent:-30px;
}

这是我能想到的唯一解决方案。我尝试使用:first-line,但在这种情况下并没有真正起作用。

相关问题