具有正确文本对齐的列表样式和项目符号效果

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. li 上的 display:table-row 和 ul 上的 display-table （但这样你不能在 lis 之间添加边距，因为 table-rows 不接受边距）

.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>

让我知道这些解决方案是否适合您。

Answer 2

您也可以使用font aweseome 来实现它：

.lists li {
  list-style-type: none;
  padding-left: 2.3em;
  margin-bottom:30px;
}

.lists li:before {
  content: "\f111"; /* Unicode */
  font-family: FontAwesome;
  color: #114576;
  display: inline-block;
  margin-left: -2.3em;
  width: 2.3em;
}

.lists ul {
  list-style: none;
  padding: 0;
  padding-left:3em;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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>
  
  </ul>
</div>