列表式＆amp;具有正确文本对齐的子弹效果

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

1. display：li
上的flex
＆＃13;
＆＃13;
.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%;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
1. 显示：li上的表格行和ul上的显示表格（但这样您就无法在li之间添加页边距，因为table-row不接受利润）
＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

请告诉我这些解决方案是否适合您。

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>