如何使用{

Question

我想格式化网页以显示一组锻炼，但将它们分组在一起，如下面的屏幕截图所示。

我知道右侧可能是一个简单的列表，例如ul，但是我试图弄清楚如何在不使用表的情况下将其格式化。我可能不知道的任何HTML或JS方法？

Answer 1

这是一种基于flexbox的方法。

HTML

<select Id="ID1" onchange="function1()"> 

CSS

<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;  
}

.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;  
}

此处的Codepen：https://codepen.io/programmerper/pen/PBaZyp