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

问题描述

所以，我有一个简单的项目符号列表，如下所示:

So, I have simple bullet list like this:

<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坐下，一直保持良好状态. Vivamus venenatis elit turpis，vel facilisis risus pellentesque nec. Curabitur dapibus libero diam，egestas congue magna dictum ut.镰刀菌发酵菌. Proin dolor nibh，怀孕妇女，无礼的委内瑞拉人.
• 橙色.整数eget velit dolor. Aenean在purus convallis porttitor的一声惊叹. Etiam hendrerit leo eu elementum tempor. Sed在Semper Magna.塞德·廷奇顿(Sed Tincidunt)，奥库尔·亨德利特(Auctor Hendrerit)，尼布·特鲁斯·洛伯蒂斯(Nibh Tellus lobortis dui)，新未成年人伏地丁等.在lorem ullamcorper consectetur的Quis mi中.

但是，我需要更改所有行的缩进除了，因此第一行看起来应该像这样:

But, I need to change all the line indentations except the first line so it will looks somewhat like this:

• 苹果. Lorem ipsum dolor坐下，一直保持良好状态. Vivamus venenatis elit turpis，vel     facilisis risus pellentesque nec. Curabitur dapibus libero diam，egestas congue magna dictum ut.     镰刀菌发酵液. Proin dolor nibh，怀孕，不礼貌venenatis est.
• 橙色.整数eget velit dolor. Aenean在purus convallis porttitor的一声惊叹. Etiam hendrerit leo eu&elementum tempor. Sed在Semper Magna. Sed Tincidunt，Auctor Hendrerit先生，mibh Tellus    lobortis dui，nec volutpat nulla Lacus adipiscing raet.在lorem ullamcorper consectetur的Quis mi中.

但不更改外部DIV容器的尺寸，填充或边距等.仅在UL或OL或LI标签上设置样式.我在网络上看到的只是如何更改第一个缩进，如果与DIV填充尺寸更改结合使用，就可以用来解决上述问题，但是由于我无法控制HTML代码，所以这非常复杂.我什至不知道HTML代码将来是否会包含DIV.因此，我只能将CSS提供给OL，UL和LI.如何使用纯CSS完成此操作?

But without changing the outer DIV container dimension, or padding, or margin, or whatever. Only styling on the UL or OL or LI tag. All I see on the web is how to change the first indentation only, which can be use to finish the problem above if combined with the DIV padding dimension change, but it's very complicated as I can't control the HTML code. I don't even know if the HTML code will include DIV or not in the future. So I can only give the CSS to OL, UL, and LI. How can I accomplish this using pure CSS?

推荐答案

您可以在li中添加填充，然后使用负的text-indent值将填充移到第一行.

You could add padding to the li, and then use a negative text-indent value to displace the padding on the first line.

jsFiddle示例

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

这是我能想到的唯一解决方案.我尝试使用 :first-line > ，但这在这种情况下实际上不起作用.

This is the only solution I can think of. I tried using :first-line, but that doesn't really work in this situation.

这篇关于如何更改项目符号列表或非项目符号列表中除第一行外的所有行的缩进?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！