纯粹在CSS中创建HTML列表 [英] Creating HTML Lists Purely in CSS

问题描述

试图使残疾朋友可以轻松地在我为他创建的站点中输入内容，而无需过多输入，CSS中有某种方法可以使用现有的换行符或制表符来创建项目符号和有序列表，而不是放在列表中元素?这些示例是针对无序的，但也需要有序的.

Trying to make it easy for a disabled friend to enter content into the site that I created for him without excessive typing, is there some way in CSS to create bulleted and ordered lists using existing line breaks or tabs rather than putting in list elements? These examples are for unordered but ordered is also needed.

例如，此:

<div class="Unordered"><br />
    List item 1<br />
    List item 2<br />
    List item 3<br />
</div>

...来自nl2br()和CSS的br是这样的吗?

. . . with the br coming from nl2br() and CSS something like this?

.Unordered {
    margin: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
}

.Unordered br {
    list-style-type: disc;
}

我正在尝试生成一个具有如下常规列表创建的外观的列表:

I'm trying to produce a list with the visual appearance created by a regular list like this:

<ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ul>

我也不反对使用PHP进行此操作.

I am not adverse to doing this using PHP either.

推荐答案

您可以使用背景色对此进行近似，通过设置 line-height

You can approximate this using background coloration where you have control over the height of each line by setting line-height

.Unordered {
   padding-left:20px;
   margin:10px;
   line-height:1.2em;
   background:
    radial-gradient(circle 0.3em,#000 86%,transparent 100%) 0 0/20px 1.2em repeat-y;
}

<div class="Unordered">
    List item 1<br>
    List item 2<br>
    List item 3<br>
</div>

<div class="Unordered">
    List item 1<br>
    List item 2<br>
    List item 3<br>
    List item 4<br>
    List item 5<br>
</div>

或者像下面这样，如果您能够为换行符考虑与< br>

Or like below if you are able to consider a different tag for the line break than <br>

.Unordered,
.Ordered{
   padding-left:20px;
   margin:10px;
   counter-reset:num;
}
/*Line break*/
.Unordered z::before,
.Ordered z::before{
   content:"\A";
   white-space:pre;
}
/*bullet*/
.Unordered z::after {
   content:"•";
}
/*numver*/
.Ordered z::after {
   content:counter(num) ".";
   counter-increment:num;
}
.Unordered z:last-of-type,
.Ordered z:last-of-type{
  display:none;
}

<div class="Unordered"><z></z>
    List item 1<z></z>
    List item 2<z></z>
    List item 3<z></z>
</div>

<div class="Ordered"><z></z>
    List item 1<z></z>
    List item 2<z></z>
    List item 3<z></z>
    List item 4<z></z>
    List item 5<z></z>
</div>

另一个骇人听闻的主意(我坚持 hacky )

Another hacky idea (I insist on hacky)

.Unordered,
.Ordered{
   padding-left:20px;
   margin:10px;
   line-height:1.2em;
   position:relative;
   overflow:hidden;
}
.Unordered:before{
  content:"";
  position:absolute;
  top:1.2em;
  bottom:0;
  left:0;
  right:0;
   background:
    radial-gradient(circle 0.3em,#000 86%,transparent 100%) 0 0/20px 1.2em repeat-y;
}
.Ordered:before{
  content:"1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20";  /*yes manually write them all !!*/
  position:absolute;
  top:1.2em;
  bottom:0;
  left:0;
  width:0;
}

<div class="Unordered"><br>
    List item 1<br>
    List item 2<br>
    List item 3<br>
</div>

<div class="Ordered"><br>
    List item 1<br>
    List item 2<br>
    List item 3<br>
    List item 4<br>
    List item 5<br>
</div>

这篇关于纯粹在CSS中创建HTML列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！