如何将2个div标签放在1行上并且项目符号不跟随

Question

我已经学习 HTML/CSS 1-2 周了，目前正在执行一项作业，要求将 2 个 div 标签放在 1 个单行上并为该行添加项目符号。此作业不需要 float、flex 或 grid，只需使用

display: inline-block 

我尝试并设法将 2 个 div 放在一行中，但是当 div2 中的内容超过 1 行时，div1 比 div2 短一些（参见图像output，我也尝试将

vertical-align: top

放入 div1 但随后项目符号不遵循。这里是一个示例测试：

.div1,
.div2 {
  display: inline-block;
}

.container {
  width: 100%;
  height: 200px;
  background-color: darkseagreen;
}

.div1 {
  width: 200px;
  /* height: 100px; */
  background-color: green;
  vertical-align: top;
}

.div2 {
  width: 500px;
  /* height: 100px; */
  background-color: cyan;
}

<ul>
  <li>
    <div class="container">
      <div class="div1">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="div2">
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </li>
</ul>

最后，我应该将整个父 div (.container) 放在 li 标记 (line3) 中，还是像下面的 ul > .container > li > div1 div2 一样？有史以来第一篇 Stackoverflow 帖子，对于给您带来的任何不便，我们深表歉意！谢谢。

这是预期结果（参见图片预期）

Answer 1

也许尝试这样的事情？

.div1,
.div2 {
  display: inline-block;
  vertical-align: top;
}
ul {
  position: relative;
  overflow: hidden;
}
.div1 {
  width: 200px;
}
.div2 {
  width: 500px;
}
p {margin: 0;}
ul::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1000px;
  top: 0;
  left: 27px;
  background: #d7d7d7;
}

li + li {
  padding-top: 10px;
  border-top: 1px solid #e7e7e7;
  margin-top: 10px;
}

<ul>
  <li>
    <div class="div1">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="div2">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </li>
  
  <li>
    <div class="div1">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="div2">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </li>
</ul>