jquery - 具有适当文本对齐的列表样式和元素符号效果

Question

.lists li{
        list-style-type: none;
    }
    .lists li:before {
        content: '\00b7';
        font-size: 140px;
        line-height: 60px;
        vertical-align: middle;
        color: #114576;
        /* margin-left: -5.5%; */
    }
    .lists ul{
        padding-top: 2%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lists">
 <ul>
  <li class="text-muted">In 2016, SAF lent technical support to the Government of Maharashtra  by assisting them with test interpretation, as well as the development of the Maha Mitra Career Portal and the setup of the student helpline for counseling</li>
  <li class="text-muted">In 2017, we have entered the next stage of development with a unique 7-field interest test, developed in collaboration with the Department of Psychology at the Savitribai Phule Pune University</li>
  <li class="text-muted">In the last 2 years, more than 32 lakh grade 10 students from over 22000 State Board schools, as well as students appearing externally for the grade 10 exam, have taken the interest test</li>
  <li class="text-muted">Students can access the        results of the interest test on the Maha Career Mitra Portal (www.mahacareermitra.in) -  a special portal developed by SAF which lists 83,000 government approved higher educational options available in Maharashtra</li>
  <li class="text-muted">These courses are further mapped to the student’s relevant district and assessed interest</li>
  <li class="text-muted">The portal also serves as a rich source of information, with numerous videos and articles on the 7 education fields (Arts, Commerce, Fine Arts, Technical, Health Sciences, Agriculture and Uniform Services)</li>
  <li class="text-muted">SAF maintains a dedicated helpline that offers students one-on-one counseling with trained career counselors from the Institute of Vocational Guidance and Selection (IVGS)</li>
  </ul> 
</div>

这里我已经实现了用元素符号设计段落的代码。但是，我遇到了一些问题，比如第二行占据了两行之间的顶部空间，而且文本没有像图像中显示的那样正确对齐。缺少一些 css 效果来显示与图像中显示的代码相同的代码。

Answer 1

您可以在 li 上使用 display:flex，它会起作用。或者使用 display:table-row 查看下面的两种解决方案

1. display:flex on li

.lists li {
  display: flex;
  margin: 40px 0;
}

.lists li:before {
  content: '\00b7';
  font-size: 140px;
  line-height: 20px;
  vertical-align: top;
  color: #114576;
  /* margin-left: -5.5%; */
}

.lists ul {
  padding-top: 2%;
}

<div class="lists">
  <ul>
    <li class="text-muted">In 2016, SAF lent technical support to the Government of Maharashtra by assisting them with test interpretation, as well as the development of the Maha Mitra Career Portal and the setup of the student helpline for counseling</li>
    <li class="text-muted">In 2017, we have entered the next stage of development with a unique 7-field interest test, developed in collaboration with the Department of Psychology at the Savitribai Phule Pune University</li>
    <li class="text-muted">In the last 2 years, more than 32 lakh grade 10 students from over 22000 State Board schools, as well as students appearing externally for the grade 10 exam, have taken the interest test</li>
    <li class="text-muted">Students can access the results of the interest test on the Maha Career Mitra Portal (www.mahacareermitra.in) - a special portal developed by SAF which lists 83,000 government approved higher educational options available in Maharashtra</li>
    <li class="text-muted">These courses are further mapped to the student’s relevant district and assessed interest</li>
    <li class="text-muted">The portal also serves as a rich source of information, with numerous videos and articles on the 7 education fields (Arts, Commerce, Fine Arts, Technical, Health Sciences, Agriculture and Uniform Services)</li>
    <li class="text-muted">SAF maintains a dedicated helpline that offers students one-on-one counseling with trained career counselors from the Institute of Vocational Guidance and Selection (IVGS)</li>
  </ul>
</div>

1. display:table-row on li 和 display-table on ul(但这样你不能在 li 之间添加边距，因为table-row不接受边距 )

.lists li {
  display: table-row;
  margin: 40px 0;
}

.lists li:before {
  content: '\00b7';
  font-size: 140px;
  line-height: 20px;
  vertical-align: top;
  color: #114576;
  display: table-cell;
  /* margin-left: -5.5%; */
}

.lists ul {
  padding-top: 2%;
  display: table;
}

<div class="lists">
  <ul>
    <li class="text-muted">In 2016, SAF lent technical support to the Government of Maharashtra by assisting them with test interpretation, as well as the development of the Maha Mitra Career Portal and the setup of the student helpline for counseling</li>
    <li class="text-muted">In 2017, we have entered the next stage of development with a unique 7-field interest test, developed in collaboration with the Department of Psychology at the Savitribai Phule Pune University</li>
    <li class="text-muted">In the last 2 years, more than 32 lakh grade 10 students from over 22000 State Board schools, as well as students appearing externally for the grade 10 exam, have taken the interest test</li>
    <li class="text-muted">Students can access the results of the interest test on the Maha Career Mitra Portal (www.mahacareermitra.in) - a special portal developed by SAF which lists 83,000 government approved higher educational options available in Maharashtra</li>
    <li class="text-muted">These courses are further mapped to the student’s relevant district and assessed interest</li>
    <li class="text-muted">The portal also serves as a rich source of information, with numerous videos and articles on the 7 education fields (Arts, Commerce, Fine Arts, Technical, Health Sciences, Agriculture and Uniform Services)</li>
    <li class="text-muted">SAF maintains a dedicated helpline that offers students one-on-one counseling with trained career counselors from the Institute of Vocational Guidance and Selection (IVGS)</li>
  </ul>
</div>

如果这些解决方案对您有用，请告诉我。