html - 如何在ul li HTML中将文本与img对齐

Question

我想制作一个类似于 Instagram 的页面来训练技术等，但我无法将文字与照片对齐，遵循代码和图片。

.div-stories {
  width: 100%;
  height: 104px;
  background: #FAFAFA;
  position: absolute;
  top: 45px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.stories {
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.stories ul {
  list-style: none;
  width: auto;
  margin-top: -5px;
}

.stories ul li {
  display: inline-block;
}

.pic-stories {
  width: 58px;
  height: 58px;
  border-radius: 50px;
  margin-left: 15px;
  margin-top: 10px;
  z-index: 5;
}

.more-stories {
  position: static;
  top: 63px;
  left: 37px;
  margin-left: -15px;
  width: 18px;
  height: 18px;
}

.txt-stories ul {
  list-style: none;
}

.txt-stories ul li {
  display: inline-block;
  position: relative;
  margin-left: 23px;
}

.effect-stories {
  width: 70px;
  height: 70px;
  border: double 6px white;
  border-radius: 50px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="div-stories">
  <nav class="stories">
    <ul>
      <li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>

      <li><img class="pic-stories effect-stories" src="img/stories2.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories3.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories4.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories5.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories6.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories7.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories8.jpg"></li>
      <li><img class="pic-stories effect-stories" src="img/stories9.jpg"></li>
    </ul>

    <nav class="txt-stories">
      <ul>
        <li>
          <p class="text-stories">Seu story</p>
        </li>
        <li>
          <p class="text-stories">shinigami...</p>
        </li>
        <li>
          <p class="text-stories">italo_rmds</p>
        </li>
        <li>
          <p class="text-stories">rodrigotea...</p>
        </li>
        <li>
          <p class="text-stories">princejack...</p>
        </li>
        <li>
          <p class="text-stories">viainfinda</p>
        </li>
        <li>
          <p class="text-stories">designer.bot</p>
        </li>
        <li>
          <p class="text-stories">mjacksonh</p>
        </li>
        <li>
          <p class="text-stories">reyzeryt</p>
        </li>
      </ul>
    </nav>


  </nav>
</div>

我正在学习html和css

标签： htmlcsshtml-helperhelper

Answer 1

如果您从中删除height: 104px;，.div-stories则会将您的内容包装在灰色背景中。

.div-stories {
  width: 100%;
  background: #FAFAFA;
  position: absolute;
  top: 45px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.stories {
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: none;
}

.stories ul {
  list-style: none;
  width: auto;
  margin-top: -5px;
}

.stories ul li {
  display: inline-block;
}

.pic-stories {
  width: 58px;
  height: 58px;
  border-radius: 50px;
  margin-left: 15px;
  margin-top: 10px;
  z-index: 5;
}

.more-stories {
  position: static;
  top: 63px;
  left: 37px;
  margin-left: -15px;
  width: 18px;
  height: 18px;
}

.txt-stories ul {
  list-style: none;
}

.txt-stories ul li {
  display: inline-block;
  position: relative;
  margin-left: 23px;
}

.effect-stories {
  width: 70px;
  height: 70px;
  border: double 6px white;
  border-radius: 50px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #C82D8D, #F99C4B);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

<div class="div-stories">
  <nav class="stories">
    <ul>
      <li><img class="pic-stories" src="img/stories1.jpg"><img class="more-stories" src="img/more-stories.webp"></li>

      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150g"></li>
      <li><img class="pic-stories effect-stories" src="https://via.placeholder.com/150"></li>
    </ul>

    <nav class="txt-stories">
      <ul>
        <li>
          <p class="text-stories">Seu story</p>
        </li>
        <li>
          <p class="text-stories">shinigami...</p>
        </li>
        <li>
          <p class="text-stories">italo_rmds</p>
        </li>
        <li>
          <p class="text-stories">rodrigotea...</p>
        </li>
        <li>
          <p class="text-stories">princejack...</p>
        </li>
        <li>
          <p class="text-stories">viainfinda</p>
        </li>
        <li>
          <p class="text-stories">designer.bot</p>
        </li>
        <li>
          <p class="text-stories">mjacksonh</p>
        </li>
        <li>
          <p class="text-stories">reyzeryt</p>
        </li>
      </ul>
    </nav>

  </nav>
</div>

示例代码笔： https ://codepen.io/brooksrelyt/pen/pGEZOp