問題點 alignment in css

Question

我想將項目符號點對齊到頂部，這樣無論行數如何，它始終位於頂部。 但是，我不能這樣做，我嘗試了不同的內容對齊方法，但它不起作用。

.floater ul > li::before {
  content: "• ";
  color: var(--color-icergi-blue);
  font-size: 2rem;
  line-height: 0;
  margin: auto 0; 
}

附加 HTML 代碼

<div class="floater">
<h2>Features</h2>
   <ul>
      <li><p>text</p></li>
      <li><p>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
      <li><p>text <br>text</p></li>
   </ul>
</div>

Answer 1

您的示例代碼非常不完整，但有一種方法可以使其正常工作。 尤其注意 position、邊距和填充設置：

 ul>li { padding: 0; list-style: none; position: relative; } ul>li::before { content: "•"; font-size: 2rem; line-height: 0; margin: 0 1em 0 -1em; position: absolute; top: 9px; }

 <ul> <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. 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.</li> <li>Cum sociis natoque penatibus</li> <li>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> </ul>