Javascript 如何使用{

我想格式化一个网页来显示一组训练，但将它们组合成一组，如下面的屏幕截图所示

---

我知道右边可能是一个像ul这样的简单列表，但我正试图找出如何在不使用表格的情况下将其格式化。我可能不知道的任何HTML或JS方法？

这是一种基于

HTML

片段

.集装箱{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； 高度：10公分； 宽度：25em； } .柜台{ 字号：5em； } .收藏{ 字号：9em； } 保险商实验室{ 列表样式：无； -之前的webkit页边距：0； -webkit后的页边距：0； -webkit填充开始：0； } .项目{ 字号：2em； } 3x { 20次俯卧撑 30 x KB摆动 10次引体向上

---

这可以通过很多不同的策略来实现，你可以用ul/ol/tables/paragration/span来实现，即使是css等等，只要选一个就可以了！：朝着你的目标迈出的一步就是尝试在css中使用首字母。1.2.浏览器对首字母的支持似乎很差。例如，请参阅。Flexbox有助于轻松居中要将{拉伸到适当的高度，可以将其实现为背景图像、SVG、边框图像。

<div class="container">
    <div class="counter">3x</div>
    <div class="collection">{</div>
    <div class="items">
        <ul>
            <li>20 x pushups</li>
            <li>30 x KB swings</li>
            <li>10 x pullups</li>
        </ul>
    </div>
</div>

.container {
    display: flex;
    flex-direction: colum;
    align-items: center;
    height: 10em;
    width: 25em;
}

.counter {
    font-size: 5em;
}

.collection {
    font-size: 9em;  
}

ul {
    list-style: none;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;  
    -webkit-padding-start: 0;
}

.items {  
    font-size: 2em;  
}