Как выровнять текст с img в ul li HTML - PullRequest
Новая
       15

Как выровнять текст с img в ul li HTML

0 голосов
/ 29 января 2019

Я хочу сделать страницу, похожую на 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

Ответы [ 4 ]

0 голосов
/ 29 января 2019

Это решение имеет новый HTML и использует атрибут data-title:

Современное и короткое быстрое решение:

example

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>
0 голосов
/ 29 января 2019

Это может помочь вам;используя 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>
0 голосов
/ 29 января 2019

Я советую вам изменить ваш 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>
0 голосов
/ 29 января 2019

Если вы удалите 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...