如何使文字与图标保持内联？

Question

我对CSS有问题。 const video = document.createElement("video"); video.controls = true; video.autoplay = true; const urls = [ { src: "/path/to/video/" }, { src: "/path/to/video/" } ]; (async() => { try { video.requestFullscreen = video.requestFullscreen || video.mozRequestFullscreen || video.webkitRequestFullscreen; let fullScreen = await video.requestFullscreen().catch(e => {throw e}); console.log(fullScreen); } catch (e) { console.error(e.message) } for (const {src} of urls) { await new Promise(resolve => { video.addEventListener("canplay", e => { video.load(); video.play(); }, { once: true }); video.addEventListener("ended", resolve, { once: true }); video.src = src; }); } })(); 中的文本位于图标行的下方。我该如何解决？我想在行的中间垂直放置文本。当我添加带有图标的<li>时会发生这种情况。

::before

.benefits-list {
  list-style: none;
}

.benefits-element {
  margin: 10px 0;
  height: 20;
}

.benefits-element:first-child {
  margin: 0;
}

.benefits-element:last-child {
  margin-bottom: 35px;
}

.benefits-element::before {
  content: '';
  background-image: url('../assets/Icon\ -\ Okay.svg');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

Answer 1

在下面添加此元素，以使伪元素与文本在垂直方向上对齐。

.benefits-element::before {
  ...
  vertical-align: middle; /* default value is 'baseline' */
}

.benefits-element {
  list-style: none;
  margin: 10px 0;
}

.benefits-element::before {
  content: '';
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0zm0 0h24v24H0V0z'/%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
  display: inline-block;
  vertical-align: middle;
  width: 1rem;
  height: 1rem;
  margin-right: 10px;
}

<section class="blog">
  <h2>Just relax <span>&</span> <br>Let us do the heavy lifting</h2>
  <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
  <ul class="benefits-list">
    <li class="benefits-element">Initial Setup & Customizations</li>
    <li class="benefits-element">Regular Updates</li>
    <li class="benefits-element">Round The Clock Support</li>
  </ul>
  <button class="button-main">Learn more</button>
</section>

此外，您不必为图标使用伪元素，只需背景图像加上一些左手填充即可。

.benefits-element {
  list-style: none;
  margin: 10px 0;
  padding-left: 25px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0zm0 0h24v24H0V0z'/%3E%3Cpath d='M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E") 0 0 / contain no-repeat;
}

<section class="blog">
  <h2>Just relax <span>&</span> <br>Let us do the heavy lifting</h2>
  <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
  <ul class="benefits-list">
    <li class="benefits-element">Initial Setup & Customizations</li>
    <li class="benefits-element">Regular Updates</li>
    <li class="benefits-element">Round The Clock Support</li>
  </ul>
  <button class="button-main">Learn more</button>
</section>

Answer 2

您的li具有确定的身高。该高度比字体短。您可以使自己更高些以容纳，也可以缩小文本。

让li更高（用于演示的红色轮廓）。

.benefits-element {
     margin: 10px 0;
     height: 30px;
     border: 1px solid red;
     box-sizing: borderbox;
}

https://codepen.io/jgoncalves/pen/ErGZMJ

.benefits-list {
  list-style: none;
}

.benefits-element {
  margin: 10px 0;
  height: 30px;
  border: 1px solid red;
  box-sizing: borderbox;
}

.benefits-element:first-child {
  margin: 0;
}

.benefits-element:last-child {
  margin-bottom: 35px;
}

.benefits-element::before {
  content: '';
  background-image: url('../assets/Icon\ -\ Okay.svg');
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

<section class="blog">
  <h2>Just relax <span>&</span> <br>Let us do the heavy lifting</h2>
  <p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
  <ul class="benefits-list">
    <li class="benefits-element">Initial Setup & Customizations</li>
    <li class="benefits-element">Regular Updates</li>
    <li class="benefits-element">Round The Clock Support</li>
  </ul>
  <button class="button-main">
           Learn more
       </button>
</section>