我怎样才能使用像表一样的跨度？

Question

我有这个HTML结构：

＆＃13;

＆＃13;

.subject{
    width: 50px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

我该怎么做？

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

这是我现实中的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

也可以尝试：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;