如何通过css和html创建一行中有三列的列表？

我正在制作一份与样品类似的清单

我尝试使用css代码来构建如上所述的列表样式。然而，我的输出看起来不像它。你能帮我看看我的css和html并帮我获得它吗

这是我当前的输出

这就是我试过的。你可以在网站上看到在线演示

---

不要使用桌子。2016年。也只是一个指针，a标签通常在li标签内

ul a{ 显示器：flex； 弯曲方向：立柱； 证明内容：中心； } ul a.信息{ 显示器：flex； 弯曲方向：行； 证明内容：之间的空间； } h2.工作类型{ 边缘顶部：15px； 页边距底部：0； } HTML5、CSS3和JavaScript演示

---

不要使用桌子。2016年。也只是一个指针，a标签通常在li标签内

ul a{ 显示器：flex； 弯曲方向：立柱； 证明内容：中心； } ul a.信息{ 显示器：flex； 弯曲方向：行； 证明内容：之间的空间； } h2.工作类型{ 边缘顶部：15px； 页边距底部：0； } HTML5、CSS3和JavaScript演示

---

我个人喜欢使用柠檬汁CSS网格， 我想如果你用这个来建造它，它会更容易得到你想要的外观。它说预先构建的样式可以帮助您完成它

这可能有助于你想象使用柠檬水的div。

---

这是柠檬水的链接

我个人喜欢使用柠檬水CSS网格， 我想如果你用这个来建造它，它会更容易得到你想要的外观。它说预先构建的样式可以帮助您完成它

这可能有助于你想象使用柠檬水的div。

---

这是柠檬水的链接，尝试模拟标签表的分解，或者您可以使用display flex使网格更灵活 例：

---

尝试模拟标记表的分解，或者可以使用DisplayFlex使网格更加灵活 例：

对于li，可以使用display:inline：

ul.inline-list {width:100%;}

ul.inline-list li {display:inline; width:33%;}

然后将class=inline列表分配给ul。

您可以将display:inline用于li的：

ul.inline-list {width:100%;}

ul.inline-list li {display:inline; width:33%;}

---

然后将class=inline列表分配给ul。

使用三列表并在表内生成用户界面，或者，尝试引导，这将更好地响应用户需求well@NitinDhomse：如何使用表格或引导程序获得我的预期结果？你能用三列代码使用表来回答这个问题，并在表中生成你的UI吗？或者，试试bootstrap，这会更好，响应更快well@NitinDhomse：如何使用表格或引导程序获得我的预期结果？你能用codeGreat来回答吗。是否可以将位置和日期放在一行的顶部和底部之间的中间位置？是的，您只需固定边距即可。我没有应用任何样式，我只是向您展示了基本布局。我更新了代码笔以反映变化。哈哈，这是2016可爱的@moesphemie Dude告诉我吧。有一半的时间我不能使用flex，因为客户端是仍然使用IE9的祖辈。让我想去kms。哈哈，别失去希望。几周前发现了这个聚填料：-也许它对你有好处。是否可以将位置和日期放在一行的顶部和底部之间的中间位置？是的，您只需固定边距即可。我没有应用任何样式，我只是向您展示了基本布局。我更新了代码笔以反映变化。哈哈，这是2016可爱的@moesphemie Dude告诉我吧。有一半的时间我不能使用flex，因为客户端是仍然使用IE9的祖辈。让我想去kms。哈哈，别失去希望。几周前发现了这个聚填料：-可能是给你的

<ul>
    <li class="row">
        <a href="#">

            <div class="td function">
                <h2>Wordpress desiger</h2>
                <p class="desc">Wordpress and beyond </p>
                <span class="jobtype">Part time</span>
            </div>

            <div class="td location">
                <p>NY.</p>
            </div>

            <div class="td time">
                <p class="time">Jan.</p>
            </div>

        </a>
    </li>
</ul>

.row a{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.td{
  padding: 5px;
}

.function{
  width: 60%;
}
.location,.time{
  width: 20%;
}

ul.inline-list {width:100%;}

ul.inline-list li {display:inline; width:33%;}