如何用display:inline-block实现两div同行且项目符号正常对齐？

问题描述 #

学习HTML/CSS1-2周，作业要求仅用display: inline-block实现两个div同行显示，且该行带项目符号，禁止用float、flex或grid。目前已实现同行，但div2内容为多行时div1高度更短；给div1加vertical-align: top后，列表项目符号无法跟随顶部对齐。

测试代码如下：

CSS代码 #

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

HTML代码 #

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

解决方法 #

问题根源在于.container是默认的块级元素，<li>中的块级元素会让列表符号默认和容器底部对齐。只需要把.container也设置为display: inline-block，并添加vertical-align: top，就能让列表符号和容器顶部对齐，同时内部的div保持顶部对齐。另外建议去掉.container的固定高度，让它自适应内容高度，更符合需求。

修改后的CSS代码：

.div1,
.div2,
.container {
  display: inline-block;
  vertical-align: top;
}

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

.div1 {
  width: 200px;
  background-color: green;
}

.div2 {
  width: 500px;
  background-color: cyan;
}

容器结构选择建议 #

必须把.container放在<li>标签内，因为HTML语义化要求<ul>的直接子元素只能是<li>。如果写成ul > .container > li的结构，会破坏列表的语义结构，不符合标准规范，浏览器渲染也可能出现异常。

内容的提问来源于stack exchange，提问作者Nhật Minh