如果它由几行组成，如何将列表标记（标记 <li>）放在 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：使用 li:first-child（意思是第一行）之类的东西与 li 标签的第一个谎言成正方形。但这无济于事，因为 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.

Answer 2

你可以试试这个代码

.teach{
    padding: 0; list-style: none;
}
.teach>li{
    position: relative; padding-left: 20px;
}
.teach>li:before{
    content: ""; position: absolute; top: 9px; left: 1px; width: 6px; height: 6px; background: #fb765f;
}
.teach>li:after{
    content: ""; position: absolute; top: 8px; left: 0; width: 6px; height: 6px; background: #000000;
}

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

如果它由几行组成，如何将列表标记（标记 <li>）放在 li 段落的第一行对面

How to place list markers (tag <li>) opposite the first line of li paragraph if it consists of few lines

html

css

responsive-design