如何在垂直方向上保持跨度？

Question

这是我现实中的代码：

＆＃13;

＆＃13;

.notifications_list{
	margin-top: 1px;
	padding-right: 15px;
	direction: rtl;
	overflow: scroll;
	width: 100%;
	height: 100%;
}

.notifications_list li{
	list-style: none;
}
.notification_date_title{
	font-size: 14px;
	margin-top: 10px;
}

.note_icon{
}

.note_icon i{
	font-size: 20px;
	margin: 0px;
}

.note_type{
	margin-right: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
  <div class="notification_date_title">امروز +5</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">دیروز +10</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">در هفته گذشته </div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
    </li>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

如您所见，目前这些图标和文字不在同一行：

这是预期的结果：

注意：方向是从右到左..！

那我怎么能这样做？

Answer 1

您需要确保所有图标的宽度相同。

您可以使用此css：

来使用它

.note_icon i {
    width: 20px;
}

您遇到的问题是图标的宽度不同，因此它们附近的元素不会以相同的方式对齐。

  

我更改i元素而不是span的原因是因为   默认情况下，span元素为inline，此处i元素为inline-block（由于fontawesome的css）。   inline块不能有宽度，因此将宽度设置为span元素将不起作用，而将宽度设置为i元素（内联块）将

这是一个工作版本：

＆＃13;

＆＃13;

.note_icon i {
    width: 20px;
}
.notifications_list{
	margin-top: 1px;
	padding-right: 15px;
	direction: rtl;
	overflow: scroll;
	width: 100%;
	height: 100%;
}

.notifications_list li{
	list-style: none;
}
.notification_date_title{
	font-size: 14px;
	margin-top: 10px;
}

.note_icon{
}

.note_icon i{
	font-size: 20px;
	margin: 0px;
}

.note_type{
	margin-right: 5px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
  <div class="notification_date_title">امروز +5</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">دیروز +10</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">در هفته گذشته </div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
    </li>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于您拥有所有类的类，因此您可以使用填充来手动对齐它们。由于它们的尺寸不同，我认为这将是最简单和最可控的方式。

例如试试这个：

i.fa.fa-sort {
    padding-right: 4px;
}

顺便说一下，预期的结果看起来像＆＃34;错误＆＃34;结果......不确定是否错误地发布了。