自定义列表样式不能使用wordwrap

我该如何解决这个问题？第3点应该像其他人一样，但不包括它使问题出现在wordwrap中。另外，wordwrap应该和其他线一样具有相同的边距。出了什么问题？自定义列表样式不能使用wordwrap

这是后面的代码：

.gruene-liste { 
 
    list-style: none; 
 
    counter-reset: gruene-liste-number; 
 
} 
 

 
.gruene-liste li { position: relative; margin-bottom: 20px;} 
 

 
.gruene-liste li::before, .gruene-liste li::after { 
 
    content: ''; 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    width: 30px; 
 
    background: green; 
 
    border-radius: 5px; 
 
    font-size: 1.4em; 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin-left: -0.4em; 
 
} 
 

 
.gruene-liste li::before { 
 
    content: counter(gruene-liste-number, decimal); 
 
    counter-increment: gruene-liste-number; 
 
    margin-right: 20px; 
 
} 
 

 
.gruene-liste li::after { 
 
    content: ''; 
 
    z-index: -1; 
 
    position: absolute; 
 
    left: 0; 
 
    transform: rotate(45deg); 
 
}

<ol class="gruene-liste"> 
 
\t <li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li> 
 
\t <li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li> 
 
\t <li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li> 
 
</ol>

另一个问题看答案底部

来源

2016-05-13 Krystian Manthey

公正立场图形绝对和添加一些pagging到特拉维夫：D

.gruene-liste { 
 
    list-style: none; 
 
    counter-reset: gruene-liste-number; 
 
} 
 

 
.gruene-liste li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding: 5px 0 5px 30px; 
 
    line-height: 1.4em; 
 
} 
 

 
.gruene-liste li::before, .gruene-liste li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
    height: 30px; 
 
    line-height: 30px; 
 
    width: 30px; 
 
    background: green; 
 
    border-radius: 5px; 
 
    font-size: 1.4em; 
 
    color: #FFF; 
 
    text-align: center; 
 
    margin-left: -0.4em; 
 
} 
 

 
.gruene-liste li::before { 
 
    content: counter(gruene-liste-number, decimal); 
 
    counter-increment: gruene-liste-number; 
 
    margin-right: 20px; 
 
} 
 

 
.gruene-liste li::after { 
 
    content: ''; 
 
    z-index: -1; 
 
    transform: rotate(45deg); 
 
}

<ol class="gruene-liste"> 
 
\t <li>Das Ultrakurzzeitgedächtnis speichert Infos bis zu 10 Sekunden lang</li> 
 
\t <li>Das Kurzzeitgedächtnis speichert Infos bis zu 20 Minuten lang</li> 
 
\t <li>Das Langzeitgedächtnis, dessen Speicherdauer von der Stärke der Verankerung der Nervenzellen durch Synapsen abhängt.</li> 
 
</ol>

来源

2016-05-13 09:41:42

真棒THX！周末愉快！ –

就像你在图片中看到的另一个问题。填充权不适用于wordwrap，如果我将位置更改为绝对，则会删除填充。

在这个网站：http://neuronade.com/kopie-sdfsdf-3

ul.iconhaken li:before{ 
 
\t \t \t \t \t content: '✔'; 
 
\t \t \t \t \t color: green; 
 
\t \t       font-weight: bold; 
 
\t \t \t \t \t margin-left: -1em; 
 
\t \t \t \t \t margin-right: .100em; 
 
             padding-right: 5%; 
 
             position: relative; 
 
\t \t \t \t } 
 
\t \t \t \t ul.iconhaken { 
 
\t \t \t \t \t list-style-type: none; 
 
\t \t \t \t }

<ul class="iconhaken"> 
 
\t <li>Jede Uni hat Seelsorge-Stellen. Erkundige dich dort mal. Alternativ kannst du über folgende Website per Mail oder per Chat eine kostenlose Beratung erhalten.</li> 
 
\t <li>Jetzt bist du optimal auf deine Prüfungen vorbereitet. Also Ruhe bewahren und viel Erfolg!</li> 
 
</ul>

来源

2016-05-13 11:36:36

自定义列表样式不能使用wordwrap

回答

相关问题