如何使用像表一样的跨度？

Question

I have this HTML structure:

 .subject{ width: 50px; } 

 <div> <span class = "subject">Name:</span> <span class="content">John</span> </div> <div> <span class = "subject">Age:</span> <span class="content">23</span> </div> <div> <span class="subject">cell phone:</span> <span class="content">+9400321532</span> </div> 

As you see, those columns aren't in the same line. I want this output:

/*
Name:       John
Age:        23
cell phone: +9400321532

How can I do that?

Actually I need a fixed-width for span.subject the size of biggest content length which is cell phone in this case.

---

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> 

Answer 1

您可以使用display:table ， display:table-row和display:table-cell将span设为table

Answer 2

Use display: table-cell;

 .subject { display: table-cell; width: 80px; } div { display: table-row; } 

 <div> <span class="subject">Name:</span> <span class="content">John</span> </div> <div> <span class="subject">Age:</span> <span class="content">23</span> </div> <div> <span class="subject">cell phone:</span> <span class="content">+9400321532</span> </div> 

Answer 3

You can make use of display table-row and table-cell to achieve this. Below code you can see that the width of the longest content is taken as the width if not it will take a min-width of 50px;

Hope this is what you are expecting :

 .notifications_list{ margin-top: 1px; padding-right: 15px; direction: rtl; overflow: scroll; width: 100%; height: 100%; display: table; } .notifications_list div, .notifications_list ul{ display: table-row; } .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 4

Please try this:

.subject{
  width: 82px;   
  display: table-cell;
  float: left;
}

Answer 5

Try this also:

 .subject{ width: 50%; float:left; } .content{width: 50%; float:right; } 

 <div> <span class = "subject">Name:</span> <span class="content">John</span> </div> <div> <span class = "subject">Age:</span> <span class="content">23</span> </div> <div> <span class="subject">cell phone:</span> <span class="content">+9400321532</span> </div>