1
votes

Comment aligner le texte avec img dans ul li HTML

Je souhaite créer une page similaire à Instagram pour entraîner des techniques, etc., mais je ne peux pas aligner les textes avec les photos, suivre le code et les images.

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

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

J'apprends le HTML et le CSS

html css html-helper helper

1 commentaires

Je n'ai pas la réputation de publier les photos mais c'est la même chose que les histoires d'instagram

4 Réponses :

0
votes

Si vous supprimez height: 104px; de .div-stories , votre contenu sera enveloppé dans l'arrière-plan gris.

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

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

Exemple de codepen: https://codepen.io/brooksrelyt/pen/pGEZOp

1 commentaires

J'ai ajouté des images différentes car je n'ai pas accès à vos fichiers / images

0
votes

Cela pourrait vous aider; en utilisant Flexbox , vous pouvez aligner les éléments en lignes ou en colonnes assez facilement sans définir de tailles exactes. Cela permet également de garder les noms alignés même s'ils ne sont pas de la même taille.

La largeur que j'ai définie sur le conteneur est juste pour montrer comment chaque élément s'étale et s'aligne avec son nom; vous pouvez le définir comme vous le souhaitez

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

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

1 commentaires

Merci mon frère, corrige mon problème

0
votes

Je vous conseille de changer votre HTML mais si vous souhaitez conserver votre HTML, vous pouvez ajouter ces règles css:

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

Code complet:

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

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

0 commentaires

0
votes

Cette solution a un nouveau HTML et utilise l'attribut "data-title":

Solution rapide et moderne:

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

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

0 commentaires