如何在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

Answer 1

这可能会对您有所帮助；使用 Flexbox，您可以很容易地在行或列中对齐项目，而无需定义确切的大小。这也有助于保持名称对齐，即使它们的大小不同。

我在容器上设置的width只是为了演示每个项目如何展开并与其名称对齐；你可以随意设置这个

.container {
  overflow-x: auto;
  width: 1000px;
}

.stories {
  display: flex;
  list-style: none;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pic {
  border-radius: 50%;
  border: double 6px white;
  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="container">
  <ul class="stories">
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username large</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username very large</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
    <li class="item">
      <img src="https://via.placeholder.com/80" alt="" class="pic">
      <span>username</span>
    </li>
  </ul>
</div>

Answer 2

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

.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

Answer 3

我建议你改变你的 HTML，但如果你想保留你的 HTML，你可以添加这个 css 规则：

ul {
  list-style: none;
}
ul li {
  margin-left:5px !important;
  border:1px solid green;
  width:82px;
  text-align:center;
}
ul li p {
  overflow: hidden;
  text-overflow:hidden;
  font-size:14px;
}
.pic-stories {
  margin:0;
}

完整代码：

.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;
}

ul {
  list-style: none;
}
ul li {
  margin-left:5px !important;
  border:1px solid green;
  width:82px;
  text-align:center;
}
ul li p {
  overflow: hidden;
  text-overflow:hidden;
  font-size:14px;
}
.pic-stories {
  margin:0;
}

<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>

Answer 4

这个解决方案有一个新的 HTML 并使用“data-title”属性：

现代而简短的快速解决方案：

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

div.stories ul {
  list-style: none;
  margin: 0;
}

div.stories ul li {
  display: inline-block;
  margin-left: 5px !important;
  width: 82px;
  text-align: center;
}

div.stories ul li::after {
  content: attr(data-title);
  font-size: 14px;
}

img {
  z-index: 5;
  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="stories">
  <nav>
    <ul>
      <li data-title="username one"><img src="https://randomuser.me/api/portraits/women/57.jpg"></li>
      <li data-title="username two"><img src="https://randomuser.me/api/portraits/women/51.jpg"></li>
      <li data-title="username tree"><img src="https://randomuser.me/api/portraits/women/52.jpg"></li>
      <li data-title="username four"><img src="https://randomuser.me/api/portraits/women/53.jpg"></li>
      <li data-title="username five"><img src="https://randomuser.me/api/portraits/women/54.jpg"></li>
    </ul>
  </nav>
</div>