Martin AJ Martin AJ - 3 months ago 14
CSS Question

How can I keep spans in the same line vertically?

Here is my code in reality:



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





As you see, currently those icons and the texts aren't in the same line:

enter image description here

And this is expected result:

enter image description here

Note: The direction is right-to-left ..!

Well how can I do that?

Answer

You will need to make sure that the width of all your icons is the same.

You can use this using this css:

.note_icon i {
    width: 20px;
}

The problem that you have there is that the icons are not the same width, so the elements near them are not aligned the same way.

The reason I changed the i element and not the span is because span elements by default are inline, and the i element here is inline-block (due to the css of fontawesome). inline blocks can't have width, so setting the width to the span element will not work, while setting the width to the i element (which is inline-block) will.

Here is a working version:

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