list-style-position：外部HTML CSS不起作用

Question

我不明白为什么list-style-position: outside无法正常工作。我使用了重要的标记，并在我所有的CSS类中进行了尝试，但是仍然无法使用。

ol {
  list-style-type: none;
  list-style-position: outside !important;
}

ol.line {
  list-style-position: outside !important;
}

ol li:before {
  content: '✓';
  font-size: 30px;
}

<ol style="list-style-position: outside !important;">
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
</ol>

（codepen）

Answer 1

这是因为您正在使用list-style-type: none; 删除它以使用list-style-type属性。如果您不想使用数字（orderd list），请考虑使用<ul>并使用伪元素更改项目符号点

Answer 2

您需要在li上使用list-style-type，而不要在li :: before上使用内容。

ol {
  list-style-type: none;
  list-style-position: outside !important;
}

ol.line {
  list-style-position: outside !important;
}

li {
    list-style-type: "\1F44D";
}

<ol style="list-style-position: outside !important;">
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
</ol>

Answer 3

检查此链接

list-style-position does not work when list-marker is pseudo-element. Why?

或尝试这个。

ol {
    padding:0;
    list-style-type: none;
    list-style-position: outside !important;
  }

ol li { padding-left:30px;position:relative;}

ol li:before {
    display:block;
    content: '✓';
    font-size: 30px;
    position:absolute;
    left:0px;
    width:30px;
    height:30px;
    top:0;
  }

<ol style="list-style-position: outside !important;">
    <li> Lorem ipsum dolor sit amet,      consectetuer adipiscing elit. Aenean </li>
    
    <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
    
   <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
  
   <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
                  
</ol>

Answer 4

由于list-style-position未定义，因此无法执行list-style。但是，如果您想在每个li之前进行检查，则可以这样更改li:before的位置：

（我的英语很抱歉）

ol {
  list-style-type: none;
}

ol li {
  position: relative;
}
ol li:before {
  position: absolute;
  content: '✓';
  left: -23px;
  top: -8px;
  font-size: 30px;
}

<ol>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
  <li> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
    quis, sem. </li>
</ol>