html - 如何使用html和css制作垂直框列表结构

Question

我想做这样的事情。 https://www.screencast.com/t/FGZW259E9twg一些要点(我只能使用一个类，只能使用“dd和dt”并且结构需要像如果我再添加一个“dd和dt”它会自动采用它以前的结构。所以不能CSS 中的硬代码。)我可以使用的 HTML 代码只有这个。

<dl class="vertical_box_list">
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Land must be purchased before road excavating can start</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Road excavating must start before Asphalt can be laid</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Laying Asphalt must be complete before line painting can be completed</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Road excavating must start before Asphalt can be completed</p></dd>
        </dl>

CSS 我试过了，但只有一个问题，如果我使用“position:absolute”，除了第一个，所有“dt”都会自动隐藏。

.vertical_box_list dt
{
    border: 1px solid;
    width: 140px;
    height: 80px;
    background: antiquewhite;
    position: absolute;
    bottom: 89%;
    left: 2%;
}
.vertical_box_list dd
{
    margin-left: 0;
    margin-bottom: 20px;
    border: 1px solid;
    width: 400px;
    height: 100px;
    z-index: 1;
    background: aliceblue;
}
.vertical_box_list dt select
{
    position: relative;
    top: 35%;
    left: 20%;
}
.vertical_box_list dd p
{
    position: relative;
    top: 40%;
}

Answer 1

dl {
  max-width:30rem;
}

dt, dd {
  margin:0;
  position:relative;
}

dt {
  left:1rem;
  display:inline-block;
  padding:0.125rem 1rem;
  border:1px solid white;
  border-radius:0.5rem;
  z-index:2;
}

dd {
  top:-1rem;
  display:block;
  padding:1rem;
  padding-top:2rem;
  text-align:right;
  z-index:1;
}

dt:nth-of-type(1) {
  background-color: rgba(236, 126, 61, 1);
}

dd:nth-of-type(1) {
  border: 1px solid rgba(236, 126, 61, 1);
  background-color: rgba(236, 126, 61, 0.25);
}

dt:nth-of-type(2) {
  background-color: rgba(208, 124, 96, 1);
}

dd:nth-of-type(2) {
  border: 1px solid rgba(208, 124, 96, 1);
  background-color: rgba(208, 124, 96, 0.25);
}

dt:nth-of-type(3) {
  background-color: rgba(255, 217, 114, 1);
}

dd:nth-of-type(3) {
  border: 1px solid rgba(255, 217, 114, 1);
  background-color: rgba(255, 217, 114, 0.25);
}

dt:nth-of-type(4) {
  background-color: rgba(165, 165, 165, 1)
}

dd:nth-of-type(4) {
  border: 1px solid rgba(165, 165, 165, 1);
  background-color: rgba(165, 165, 165, 0.25);
}

<dl class="vertical_box_list">
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Land must be purchased before road excavating can start</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Road excavating must start before Asphalt can be laid</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Laying Asphalt must be complete before line painting can be completed</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Road excavating must start before Asphalt can be completed</dd>
</dl>