Question

我将使用无序列表元素。在这里我分开或在子弹和文本之间留出一些空间。它工作正常，但当文本使用另一行时，由于特定列表元素中的一些大句子，它不使用空格。

＆＃13;

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 56px;
}

li::before {
  content: "•";
  padding-right: 38px;
  color: blue;
}

＆＃13;

<ul>
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>

＆＃13;

如果无法理解，请告诉我。提前谢谢。

Answer 1

将display：table放在你的li和li ::在添加display之前：table-cell可能适合你

＆＃13;

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

li { 
    padding-left: 56px; 
    display: table;
}

li::before {
    content: "•"; 
    padding-right: 38px;
    color: blue; 
    display: table-cell;
}

＆＃13;

<ul>
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>

＆＃13;

Answer 2

试试这段代码。

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding-left: 20px;
  position: relative;
}

li::before {
  content: "•";
  color: blue;
  position: absolute;
  left: 0;
  top: 0;
}

Answer 3

为什么不使用list-style-type？

＆＃13;

ul.bullet {
    
    list-style-type: disc;
    
    /*
     * you can change to the style that you want
     * list-style-type: circle;
     */
}

＆＃13;

<ul class="bullet">
  <li>Password must have Alphabet, Numeral and Special Characters.Password must have Alphabet, Numeral and Special Characters</li>
  <li>Password must have Alphabet, Numeral and Special Characters</li>
</ul>

＆＃13;

Answer 4

使用以下代码修改li代码和li::before：

li { 
    padding-left: 56px; 
    display: table;
}

li::before {
    content: "•"; 
    padding-right: 38px;
    color: blue; 
    display: table-cell;
}

列出数字和文本之间的元素空间css

4 个答案: