Javascript 如何使用html、css制作这样的文档？不是表标记，只需使用列表标记（ex）<；李>&书信电报；ol>&书信电报；ul>；

我在我的测试项目上有一个小任务，我必须创建一个类似于表的列表视图

类似于下面的代码片段

功能突出显示（e）{
如果（已选择[0]）已选择[0]。类名=“”；
e、 target.parentNode.className='selected'；
}
var table=document.getElementById（'table'），
selected=table.getElementsByClassName（'selected'）；
table.onclick=突出显示；
函数fnselect（）{
var$row=$（this.parent（）.find（'td'）；
var clickeedID=$row.eq（0.text（）；
//警报（单击eId）；
}
$（“#tst”）。单击（函数（）{
var值=$（“.selected td:first”）.html（）；
值=值| |“未选择行”；
警报（值）；
});
td{border:1px#DDD-solid；padding:5px；cursor:pointer；}
.选定{
背景颜色：棕色；
颜色：#FFF；
}

1法拉利F138
1 000€
1 200€
2013年经济转型前的莫诺波斯图-斯库德里亚法拉利车型
1.
F138
克里克预详细
2法拉利F138
1 000€
1 200€
2013年经济转型前的莫诺波斯图-斯库德里亚法拉利车型
1.
F138
克里克预详细
3法拉利F138
1 000€
1 200€
2013年经济转型前的莫诺波斯图-斯库德里亚法拉利车型
1.
F138
克里克预详细
使用无序列表和div元素可以实现表格效果

    <div class="wrapper">
    <ul class="itemrow">
        <li><div>1one</div></li>
        <li><div>1two</div></li>
        <li><div>1three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>2one</div></li>
        <li><div>2two</div></li>
        <li><div>2three</div></li>

    </ul>
  <ul class="itemrow">
        <li><div>3one</div></li>
        <li><div>3two</div></li>
        <li><div>3three</div></li>

    </ul>
</div>

最好的方法是在css中使用
表显示
属性。因为在
表格
视图中会注意自动调整单元格大小，并且在显示除合并单元格外的属性时，可以使用使用
tr td table
的所有功能。我试过一些，请看一下。只是单独使用css


div{
显示：表格；
边界塌陷：分离
}
保险商实验室{
显示：表格行
}
李{
显示：表格单元格；
边框：1px实心#dfdfdf；
填充物：5px；
}



1法拉利F138


1 200€


1 200€


奥德尔莫诺波斯图斯库德里亚法拉利2013年前


1 200€




1法拉利F138


1 200€


1 200€


奥德尔莫诺波斯图斯库德里亚法拉利2013年前


1 200€




1法拉利F138


1 200€


1 200€


奥德尔莫诺波斯图斯库德里亚法拉利2013年前


1 200€




1法拉利F138


1 200€


1 200€


奥德尔莫诺波斯图斯库德里亚法拉利2013年前


1 200€



1法拉利F138


1 200€


1 200€


奥德尔莫诺波斯图斯库德里亚法拉利2013年前


1 200€


简单地说，您可以使用以下代码使用
标记创建类似视图的表：

<ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 3</li>
</ul>


示例数据1
示例数据2
示例数据3


编辑：

注意：您可以根据上述代码中的要求更改高度和宽度

下面是一篇很好的文章，它很可能解释了您需要做什么：

谢谢你！！감사합니다.
<ul style="list-style: none outside none;">
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 1</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 2</li>
    <li style="float: left;display: block;width: 100px;height: 40px;">Sample Data 3</li>
</ul>