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

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">[phone]</span>
</div>

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

/*
Name:       John
Age:        23
cell phone: [phone]

我怎样才能做到这一点？

实际上我需要一个固定宽度的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作为桌子

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">[phone]</span>
</div>

Answer 3

请试试这个：

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

Answer 4

您可以使用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 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">[phone]</span>
</div>