<li> 中的第二行与第一行位于同一位置

Question

我有一个带有自定义项目符号背景图像的 <li>。现在，我想让项目符号中的文本位于标记之外，使用 CSS 中的 list-item-position: outside。但是，它似乎没有用。第二行仍然从容器的开头开始（在图像下方）。我的 html 看起来像这样：

<ul className={styles.missieTxt}>
          <li className={styles.bulletsMissie}>
            ... lorem ipsum lorem ipsum lorem, {" "}
            <span className={styles.focusMissie}>100% </span>lorem
          </li>
        
               <li className={styles.bulletsMissie}>
            ... lorem ipsum <span className={styles.focusMissie}>lorem</span>
            , lorem ipsum lorem ipsum
          </li>

          <li className={styles.bulletsMissie}>
            ... <span className={styles.focusMissie}>lorem</span> lorem ipsum
            <span className={styles.focusMissie}>lorem</span> 
          </li>

          
        </ul>

css 看起来像这样：

.missieTxt {
  display: flex;
  flex-direction: column;
}

.bulletsMissie {
  list-style-type: none;
  position: relative;
  font-size: clamp(0.8rem, 1.3vw, 1.5rem);
  margin-right: 1rem;
  list-style-position: outside;
}

.bulletsMissie::before {
  content: "";
  display: inline-flex;
  height: 20px;
  width: clamp(25px, 3vw, 48px);
  background-image: url(../images/overOns/bulletsImg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  align-items: center;
  margin-right: 0.5rem;

}
.focusMissie {
  color: #78c0a8;
  font-weight: bold;
}

如果屏幕较小，文本溢出到第二行，它就从图像下面开始，这是我不想要的。有人对此有解决方案吗？ :(

提前致谢！

Answer 1

试试这个，看看它是否有效。

.missieTxt {
      display: flex;
      flex-direction: column;
    }
    
    .bulletsMissie {
      list-style-type: none;
      position: relative;
      font-size: clamp(0.8rem, 1.3vw, 1.5rem);
      margin-right: 1rem;
      list-style-position: outside;
      display: block;
      padding-left: clamp(25px, 3vw, 48px);
    }
    
    .bulletsMissie::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 20px;
      width: clamp(25px, 3vw, 48px);
      background-image: url(../images/overOns/bulletsImg.png);
      background-repeat: no-repeat;
      background-size: 100%;
    
    }
    .focusMissie {
      color: #78c0a8;
      font-weight: bold;
    }

Answer 2

您可能要考虑更改：list-style-type: none;

在.bulletsMissie

到list-style-image: url(../images/overOns/bulletsImg.png);

和 list-item-position: outside 将起作用。

<li> 中的第二行与第一行位于同一位置

Second line in <li> on the same position as first line

html

css

flexbox