当标签类型为 inline-block 时，插入文本或图像时，布局不保持水平

编程问答 2022-12-09

问题描述

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="UTF-8">
        <Meta http-equiv="X-UA-Compatible" content="IE=edge">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Document</title>

        <style>
          ul {
            list-style-type: none;
            padding: 0;
          }
            li > span {
                border: 1px solid blue;
                display: inline-block;
                width: 100px;
                height: 20px;
            }
        </style>
    </head>
    <body>
      <ul>
        <li>
          <span>
            <div>a</div>
            <div>a</div>
          </span>
          <span></span>
          <span>
            <img src="" alt="dummy">
          </span>
        </li>
      </ul>
    </body>
</html>

这是一个示例代码。
li 标签设置为 inline-block， 我认为浏览器中呈现的代码是三个水平的蓝色 ractangles。 但真实的告诉我三个 ractangles 不是水平的。 刚刚插入了“a”文本。和 li 标签区域！ 我想它一定是这样的

 ____  ____  ____ 
: a   ::   ::   :
  a

但它显示了我

 ____ 
: a  : ____  ____ 
  a   :    ::    :

我不知道为什么会这样。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlhtml-listsinline-stylestext-align