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

问：

我已经学习了 HTML/CSS 1-2 周，目前正在完成一项作业，需要将 2 个 div 标签放在 1 行上并添加该行的项目符号。此分配不需要浮点、flex 或网格，只需使用

display: inline-block

我尝试并设法将 2 div 放在一行中，但是当 div2 中的内容超过 1 行时，div1 比 div2 短一点（见图像输出，我也尝试放入 div1，但随后项目符号没有跟随。下面是一个示例测试：vertical-align: top

.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 标签（第 3 行）中，还是像下面的 ul > .container > li > div1 div2 一样？有史以来第一个 Stackoverflow 帖子，因此对于给您带来的不便，我们深表歉意！谢谢。

这是一个预期结果（见图像预期)

html css css-float 内联样式项目符号

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

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

how to put 2 div tag on 1 line and bullet does not follow

评论

评论