我想创建一个订单列表如下所示款式样图像：如何将列表项目和列表内容与空间对齐？

我已经尝试了一些方法，用下面的代码：

body { 
    padding: 20px; 
} 

ol { 
    list-style-type: upper-roman; 
    list-style-position: inside; 
} 
ol li { 
    position: relative; 
} 
ol li span { 
    position: absolute; 
    left: 30px; 
}

它看起来像我想要的风格。然而，当内容包，就会一起崩溃：

有什么办法解决呢？

这是我用来演示的链接：

Demo code

来源

2017-10-14 PJCHENder

指https://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css – davidchoo12

愿意使用javascript？ –

@ChrisHappy javascript也愿意。不过，我认为这是风格。因此，纯粹的CSS（如果能达到目的）更为可取。 – PJCHENder

CSS定制counter：

我会建议做这个使用专用CSS counter，因为它是专门为这类情况下，你需要一个自定义的前瞻性计数器。

另外，正如您所看到的，HTML更简单，并且不需要在每个li项目内包装span。

ol { 
 
    counter-reset: list; 
 
    list-style:none; 
 
} 
 

 
ol li { 
 
    position: relative; 
 
    padding-left: 40px; 
 
} 
 

 
ol li::before { 
 
    position: absolute; 
 
    left: 0; 
 
    counter-increment: list; 
 
    content: counter(list, upper-roman)'.'; 
 
}

<ol> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur?</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</li> 
 
    <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</li> 
 
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</li> 
 
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</li> 
 
    <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus.</li> 
 
</ol>

来源

2017-10-14 08:08:15 vsync

尝试list-style-position: inside;

body { 
 
    padding: 20px; 
 
} 
 

 
ol { 
 
    list-style-type: upper-roman; 
 
    list-style-position: inside; 
 
} 
 

 
ol li { 
 
    position: relative; 
 
    list-style-position: outside; 
 
    padding-left: 5px; 
 
} 
 

 
ol li span { 
 
    position: relative; 
 
}

<ol> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur? 
 
      </span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</span></li> 
 
    <li><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</span></li> 
 
    <li><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</span></li> 
 
    <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</span></li> 
 
    <li><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus. 
 
      </span></li> 
 
</ol>

来源

2017-10-14 07:28:39 codesayan

“list-style-position：outside;”在ol里将使列表项目在右侧而不是在左侧对齐。在将“list-style-position：outside”注释掉之后，我不知道如何在列表项和列表内容之间添加空格。 – PJCHENder

使用div代替span，并改变你的CSS像下面

body { 
 
    padding: 20px; 
 
} 
 

 
ol { 
 
    list-style-type: upper-roman; 
 
    list-style-position: inside; 
 
    display: initial; 
 
} 
 
ol li div { 
 
    padding-left: 40px; 
 
    margin-top: -19px; 
 
}

<ol> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, excepturi!</div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat provident impedit id? Enim nihil aperiam modi? Laudantium vel maiores consequatur? 
 
      </div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis illum natus impedit non ea animi?</div></li> 
 
    <li><div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime consequuntur ea doloremque voluptatum, temporibus optio quis. Adipisci libero numquam laboriosam.</div></li> 
 
    <li><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, magnam!.</div></li> 
 
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur, qui?</div></li> 
 
    <li><div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem cum consectetur qui enim optio delectus. 
 
      </div></li> 
 
</ol>

来源

2017-10-14 07:29:18 C2486

哦，你做到了！太好了！ –

如何将列表项目和列表内容与空间对齐？

回答

CSS定制counter：

相关问题