如何控制 <ul> <li> 的文本位置？ [复制]答案

【问题标题】：How to control text position of <ul> <li>? [duplicate]如何控制 <ul> <li> 的文本位置？ [复制]
【发布时间】：2021-02-10 19:19:38
【问题描述】：

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

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

这是我想要的理想格式。

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

【问题讨论】：

最好向我们提供具体的代码示例，以便我们能够直接帮助您。

标签： html css

【解决方案1】：

您可以在set the bullet style 和list-style-type 中包含您的标签，而不是在每个li 中。设置值lower-alpha 将用小写字母标记您的列表项。由于项目符号正在设置样式，因此线条将保持其原始的环绕和缩进样式。

.ul-alpha li {
  list-style-type: lower-alpha;
}

<ul>
  <li>a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>b. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>c. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>d. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
</ul>

<ul class="ul-alpha">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fringilla, sem in maximus fringilla, metus lorem fringilla diam, in gravida.</li>
</ul>

【讨论】：

【解决方案2】：

您可能需要使用padding-left 值，而不是使用list-style-position: inside;。
我在这里也使用了<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>

【讨论】：