如何將跨度垂直保持在同一行？

Question

這是我的實際代碼：

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

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

如您所見，當前這些圖標和文本不在同一行：

這是預期的結果：

注意：方向是從右到左。

那么我該怎么做呢？

Answer 1

您需要確保所有圖標的寬度相同。

您可以使用以下CSS使用此代碼：

.note_icon i {
    width: 20px;
}

您遇到的問題是圖標的寬度不同，因此靠近它們的元素的排列方式不一致。

我更改i元素而不更改span的原因是因為span元素默認情況下是inline ，而此處的i元素是inline-block （由於fontawesome的css）。 inline塊不能具有寬度，因此將寬度設置為span元素將不起作用，而將寬度設置為i元素（內聯塊）則可以。

這是一個工作版本：

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

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

Answer 2

由於所有類都有它們，因此可以使用填充手動對齊它們。 由於它們的大小不同，我認為這將是最簡單且可控制的方式。

例如，嘗試以下操作：

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

順便說一句，預期結果似乎與“錯誤”結果完全相同...不確定是否是錯誤發布。