html - 如果它由几行组成，如何将列表标记(标记 )放在 li 段落的第一行对面

Question

我有一个带有 li 标签的列表。当我减小屏幕宽度时，这些 li 行被分成几行，因此列表标记位于它们的中间。如果同一个 li 标签中有多个，如何将它们放在第一行的前面。

https://cdn1.savepice.ru/uploads/2019/11/12/5f2985128f9cc90c861e7623e23a387b-full.png - 截图

我可以使用 li:before 并将其放置在边距处，但由于宽度不同，这些行会被不同数量的行分开，因此每次使用媒体查询时，我都必须将此列表标记放在一个新位置。我想我可以给 list-style-type: none。和 list-style-type: square 到 li 标签的第一个谎言，使用类似 li:first-child(意思是第一行)的东西。但这无济于事，因为 CSS 3 认为第一个 child 只是 ul 标签中所有标签中的第一个 li，而不是每个 li 标签中的第一行。

html:

<ul class="teach"> blablabla:
                <li>blablabla</li>
                <li>blablabla</li>
                <li>blablabla</li>
                <li>blablabla</li>
                <li>blablabla</li>
            </ul>

CSS:

.teach {
  padding: 0;
  list-style-type: square;
}

.teach>li {
  position: relative;

}

.teach>li:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -20px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: #fb765f;
}

// these lines down below don't work in appropriate way as it should

.teach>li {
  list-style-type: none;
}

.teach>li:first-child {
  list-style-type: square;
}

// so I've just got rid of them

我希望标记在第一行的对面

Answer 1

它们在中间，因为你设置了:

.teach>li:before {
    top: 50%;
}

您应该使用固定的最高值作为:

.teach>li:before {
    top: 9px;
}

请看下面:

.teach {
    list-style-type: none;
}
.teach>li {
    position: relative;
}
.teach>li:before {
    content: "";
    position: absolute;
    top: 9px;
    left: -20px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    background: #fb765f;
}
.teach>li {
    list-style-type: none;
}

<ul class="teach">
    <li>1 blablabla blablabla</li>
    <li>2 blablabla</li>
    <li>3 blablabla</li>
    <li>4 blablabla blablabla blablabla blablabla</li>
    <li>5 blablabla blablabla blablabla blablabla blablabla</li>
</ul>

也在 JSFiddle 上.