Как я могу удерживать промежутки в одной строке по вертикали?

Question

Вот мой код в действительности:

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

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

 
.note_icon{ 
 
} 
 

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

 
.note_type{ 
 
\t 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 (в связи с CSS в fontawesome). inline блоки не могут иметь ширину, поэтому установка ширины на элемент span не будет работать, а установка ширины на элемент i (который является встроенным блоком) будет.

Вот рабочая версия:

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

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

 
.note_icon{ 
 
} 
 

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

 
.note_type{ 
 
\t 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; 
} 

Кстати ожидаемый результат, кажется, точно такой же, как «неправильный» результат ... Не уверен, что был отправлен по ошибке.