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

Question

我有这个HTML结构：

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

如您所见，这些列不在同一行。 我想要这个输出：

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

我怎样才能做到这一点？

实际上，我需要一个固定宽度的span.subject ，在这种情况下，最大内容长度是cell phone的大小。

---

这是我的实际代码：

 .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

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

您可以使用display table-row和table-cell实现此目的。 在下面的代码中，您可以看到最长内容的宽度被视为宽度，否则，最小宽度为50px。

希望这是您所期望的：

 .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

请尝试以下方法：

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

Answer 5

也尝试一下：

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