自定义列表样式不使用wordwrap

Question

我该如何解决这个问题？第3点应该和其他人一样，但是在wordwrap中它会产生问题..同样，wordwrap应该像其他行一样具有相同的边距。出了什么问题？

这是背后的代码：

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一个问题见底部的答案

Answer 1

只需将图形置于绝对位置并为tase添加一些内容：D

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你在图片中看到的另一个问题。 padding-right对于wordwrap不起作用，如果我将位置更改为绝对，则删除填充。

在此网站上：http://neuronade.com/kopie-sdfsdf-3

 View v1 = getWindow().getDecorView().getRootView();
                    v1.setDrawingCacheEnabled(true);
                    myBitmap = v1.getDrawingCache();`

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