如何在同一行中垂直跨度？

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（由於fontawesome的CSS）。 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; 
} 

順便說預期的結果似乎是完全一樣的，如「錯誤」的結果...不知道如果這被張貼的錯誤。