2016-05-13 33 views
3

我該如何解決這個問題?第3點應該像其他人一樣,但不包括它使問題出現在wordwrap中。另外,wordwrap應該和其他線一樣具有相同的邊距。出了什麼問題?自定義列表樣式不能使用wordwrap

enter image description here

這是後面的代碼:

.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>

另一個問題看答案底部

回答

1

公正立場圖形絕對和添加一些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>

+0

真棒THX!週末愉快! –

0

就像你在圖片中看到的另一個問題。填充權不適用於wordwrap,如果我將位置更改爲絕對,則會刪除填充。

enter image description here

在這個網站: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>

相關問題