html - 如何控制文本的位置 ?

Question

在使用<ul> <li>标签时，我遇到了基本问题。

这是导致问题的屏幕截图。

这是我想要的理想格式。

我想我可以通过使用<li>标签 CSS 属性来控制它。

标签： htmlcss

Answer 1

而不是使用list-style-position: inside;你可能需要padding-left使用价值。
我也使用<ol>而不是在<ul>这里，因为在您的示例中，您有一个有序列表

ol {
  padding-left: 0;
}

.list-1 {
  list-style-position: inside;
}

.list-2 {
  padding-left: 16px;
}

<ol class="list-1">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

<ol class="list-2">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>