html - 在 Div 中对齐内容

Question

我有什么

我有这张 table 。

用这个HTML

<div class="list-item">
<p>
 <input type="checkbox">
 <span class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></span> 
 <span class="list-title">{{this.title}}</span> 
 <span class="list-owner">{{this.owner}}</span>
 <span class="list-date">16 Dec 2014</span>
</p>
 </div><br>

有了这个CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
  margin-left: 10px;
  margin-right: 10px;
}

我想完成什么

但我想在 <div> 中创建类似表格的内容.

注意 我知道 <table>非常适合，但对于如何创建此内容，我需要用这个 <div> 模拟一个表，所以不幸的是，它不是这里的选项。

我需要复制这样的东西(检查图像)。

注意忽略星标

我已经尝试过的

---

设置margin-left每个 <span>但是“管理员”和“日期”的顺序不相等，如果我使用边距我会得到这个(检查图片)。

我用这个 CSS

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}

.list-type{
 margin-left: 10px;
}

.list-title{
   margin-left: 10px;
}

.list-owner{
  margin-left: 100px;
}

.list-date{
  margin-left: 190px;
}

Answer 1

试试 CSS 表格:

.list-item {
  display: table;
}
.list-item > p {
  display: table-row;
}
.list-item > p > * {
  display: table-cell;
}