时间戳

首页 > 解决方案 > 为什么文本会超出 div？

html - 为什么文本会超出 div？

问题描述

有人可以解释一下为什么文本会超出 div 吗？而且我不能垂直居中。为什么它不在 ul 列表框中？

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: 283px;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}
<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

图片在这里

标签： htmlcss

解决方案

.experience-section {
  padding: 0 25px;
}

.experience-section .figure {
  font-family: 'Garamond-Italic';
  background: url('../img/x.svg') no-repeat;
  background-size: 100%;
  height: auto;
  width: 283px;
}

.experience-section .figure ul li:first-child {
  font-size: 193px;
}

.experience-section .figure ul li:nth-child(2) {
  font-size: 80px;
  letter-spacing: 0.2em;
  margin-top: 23px;
}
<div class="col-md-4">
  <div class="experience-section" style="background-image:url(assets/img/welcome-bg-1.jpg);">
    <div class="figure">
      <ul>
        <li>15</li>
        <li>years</li>
      </ul>
    </div>
    <h3>Our words talk about experience</h3>
    <p>Nunc rhoncus advenenatis est nec hdrerit. Donec eu mauris sapien. Maecen id metus pellentesque ex feugiat cursus cenustsque feugiatus cursus cesius alteri.</p>
  </div>
</div>

推荐阅读