Question

我正在使用以下方法设计自定义无序列表：

.list-light li a:before {
content: "\f104";
font-family: FontAwesome;
margin-left: 8px;
color: #bcc987;
font-size: 12px;
}

如果锚点以字符开头，则效果很好。但是如果我以200开头，那么子弹就会移动。

我该如何解决这个问题？ check the image

HTML代码

<ul class="list-light">
<li><a href="/Portal/ND/515">تنفيذ أولى مراحل التحول الرقمي بمراكز استقبال ضيوف الرحمن بالمدينة المنورة</a></li>
<li><a href="/Portal/ND/514">أمير المدينة المنورة يرأس الاجتماع الأول لمجلس هيئة تطوير المنطقة</a></li>
<li><a href="/Portal/ND/513">خادم الحرمين الشريفين يصل إلى نيوم</a></li>
<li><a href="/Portal/ND/511"> أمير منطقة المدينة المنورة يرأس لجنة الحج بالمدينة المنورة</a></li>
<li><a href="/Portal/ND/510">200 ألف سائح يقلهم باص المدينة السياحي في عامه الأول</a></li>

Answer 1

尝试float:right

CSS：

.list-light li a:before {
  content: "\f104";
  font-family: FontAwesome;
  margin-left: 8px;
  color: #bcc987;
  font-size: 12px;
  float: right;
}

.list-light {
  direction: rtl;
  list-style: none;
}

演示：http://jsfiddle.net/GCu2D/4914/

数字显示在RTL中的内容CSS之前

1 个答案: