CSS 元素设置display: inline-block；出现不对齐情况解决方法

最新推荐文章于 2024-08-25 13:06:40 发布

EastRiseJi

最新推荐文章于 2024-08-25 13:06:40 发布

阅读量2.2k

点赞数 3

分类专栏：前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/EastRiseJi/article/details/109048137

版权

前端开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

博客讲述了在CSS布局中遇到的一个问题：当使用`display: inline-block`设置书名显示时，书名位置出现偏上显示。通过调查发现，这是由于inline-block元素内部元素的基线对齐导致的。解决方案是在内部元素上添加`vertical-align: bottom`属性，从而调整对齐方式，成功解决了书名显示不正常的问题。

摘要由CSDN通过智能技术生成

事情是这样的：

为了使页面看起来比较整齐，我限制了书名的长度并添加title显示。发现我将中间书名设置成 "display: inline-block;"后，书名位置偏上显示了（如下图）。

 <style>
    .box {
    }
    .book-name-box {
      display: inline-block;
      min-width: 200px;
      text-align: right;
    }
    .mid {
      display: inline-block;
      max-width: 100px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space:nowrap;
    }
  </style>
  <div class="box">
    <span class="book-name-box">
      《
      <span class="mid">1这是一个很长的书名</span>
      》：
    </span>
    <span>这里是一个描述信息</span>
  </div>
  <div class="box">
    <span class="book-name-box">
      《
      <span class="mid">2书名</span>
      》：
    </span>
    <span>这里是一个描述信息</span>
  </div>
  <div class="box">
    <span class="book-name-box">
      《
      <span class="mid">3这是一个很长的书名</span>
      》：
    </span>
    <span>这里是一个描述信息</span>
  </div>

经过一番调查研究后发现，原来是inline-block元素内的元素基线发生了变化。

解决方法就是在此元素上设置一个vertical-align:middle/top/bottom。

  <style>
    .book-name-box {
      display: inline-block;
      min-width: 200px;
      text-align: right;
    }
    .mid {
      display: inline-block;
      max-width: 100px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space:nowrap;
      vertical-align: bottom; // 此处新增
    }
  </style>

大功告成！！！