li标签显示两行文本出现的问题

ゝ把回忆冻结

于 2022-07-15 16:43:51 发布

阅读量627

点赞数

分类专栏：前端开发文章标签：大数据

本文链接：https://blog.csdn.net/weixin_43859432/article/details/125807739

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<div class="chunk">
        <ul>
          <li>项目管理<p>PROJRCT&nbsp;MANAGEMENT</p></li>
          <li>软考<p>SOFT&nbsp;TEST</p></li>
          <li>通信工程<p>COMMUNICATION&nbsp;ENGINEERING</p></li>
          <li>建筑公程<p>ARCHITECTURAL&nbsp;ENGINEERING</p></li>
          <li>金融财会<p>FINANCIAL&nbsp;ACCOUNTING</p></li>
          <li>医药卫生<p>MEDICAL&nbsp;SCIENCE</p></li>
          <li>职业资格<p>PROFESSIONAL&nbsp;QUALIFICATION</p></li>
          <li>考博/考研<p>POSTGRADUATE&nbsp;ENTRANCE</p><p>EXAMINATION</p></li>
        </ul>
</div>

一开始想在li标签里显示两行文本，当时用p标签换行时，一直会跳出li标签，而且显示不出来。原因是在书写css时添加了一个属性导致的，因为想让文本在li中垂直居中就设置了line-height属性，导致了p标签里面的内容显示不出来。

.chunk li {
  float: left;
  width: 220px;
  height: 180px;
  text-align: center;
  box-sizing: border-box;
  padding-top: 70px;
  background-image: url(../images/29_102.jpg);
  color: #fff;
  margin-right: 26px;
  margin-top: 20px;
}

解决方法：

去掉line-height属性，垂直居中改用内边距padding-top慢慢调整，但是要注意盒子塌陷问题，要给父盒子添加overflow：hidden属性才能防止塌陷问题。