时间戳

首页 > 解决方案 > 列出数字和文本 css 之间的元素空间

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

问题描述

我将使用无序列表元素。在这里，我在项目符号和文本之间分隔或留出一些空间。它工作正常，但是当由于特定列表元素中的一些大句子而使用另一行的文本时，它没有使用空间。

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

li {
  padding-left: 56px;
}

li::before {
  content: "•";
  padding-right: 38px;
  color: blue;
}
<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>

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

标签： htmlcsshtml-lists

解决方案

把 display:table 放在你的 li 和 li::before 添加 display: table-cell 可能对你有用

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;
}
<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>

推荐阅读