对齐Div

Question

我有什么

我有这张表。

使用此 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>，但“admin”和“date”的顺序不等于，如果我使用边距，我会得到此（检查图片）。

我用这个 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;
}

Answer 2

我已经更改了一些标签和一些CSS，我喜欢使用百分比宽度和div。如果这对你没有帮助，也许它可以给你更多的想法。

.list-item{
  display: inline-block;
  width: 100%;
  border: solid 1px #dddddd;
}
.cb{
    float: left;
    width:3%;
}
.list-type{
    float: left;
    width:8%;
}


.list-title{
    float:left;
    width:35%;
}

.list-owner{
    float:left;
    width:15%;
}

.list-date{
    float: left;
    width: 20%;
}

<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title</div> 
 <div class="list-owner">Owner</div>
 <div class="list-date">16 Dec 2014</div>
</p>
 </div><br>
<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title22</div> 
 <div class="list-owner">Owner22</div>
 <div class="list-date">16 Dec 201422</div>
</p>
 </div><br>
<div class="list-item">
<p>
 <input type="checkbox" class="cb">
 <div class="list-type"><img src="/images/types/{{this.type}}.png" title="{{this.type}}" /></div> 
 <div class="list-title">Title 333</div> 
 <div class="list-owner">Owner 333</div>
 <div class="list-date">16 Dec 2014333</div>
</p>
 </div>

这有帮助???

Answer 3

尝试使用以下css：

.list-title{ margin-left: 10px; width: 200px;}
.list-owner{ margin-left: 10px; width: 40px;}
.list-date{ margin-left: 10px; width: 40px;}

注意：根据需要更改宽度尺寸。

Answer 4

表格数据：使用表格。

或者@oriol建议使用CSS表。