我想像上面那样制作产品列表,我尝试使用以下代码但它看起来不太好,请以正确的方式给我建议,
.tablep{
float:left;
padding-right:150px;
}
.bg{
background-color:grey;
}
<div class="tablep bg">Code #</div><div class="tablep bg">Product Name</div><div class="tablep bg">Date</div><div class="tablep bg">Amount</div><br>
<div class="tablep">Id1</div><div class="tablep">product1</div><div class="tablep">2015</div><div class="tablep">100USD</div>
我怎样才能像图片一样。非常感谢
最佳答案
您应该为此类数据使用表格。这是语义上正确的方式。
表格的大小与所有内容相匹配。如果您像在自己的代码中那样使用 div,那么它们将不会很好地拉伸(stretch)。我创建了一个表格并将其宽度设置为 100%。那应该给你正是你想要的。
tr
代表表格行,th
代表表格标题,td
代表表格单元格。
.tablep {
width: 100%;
}
.tablep th {
background: lightgrey;
text-align: left;
}
<table class="tablep" cellspacing="0">
<tr>
<th>Code #</th><th>Product Name</th><th>Date</th><th>Amount</th>
</tr>
<tr>
<td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
</tr>
<tr>
<td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
</tr>
<tr>
<td>Id1</td><td>product1</td><td>2015</td><td>100USD</td>
</tr>
</table>
关于html - 多列列表html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37433239/