Как я могу изменить положение чисел в старом списке?

ProgramBox

Как я могу изменить положение чисел в старом списке?

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#html #css #image #list #html-lists

#HTML #css #изображение #Список #html-списки

Вопрос:

Это HTML-код списка OL, над которым я работаю. Предполагается, что в нем должны быть изображения, но я не знаю, как их добавить сюда. Что я хочу сделать, так это чтобы числа отображались в верхней части изображения, а не в нижней. Их позиция по умолчанию, похоже, находится внизу слева. Я хочу, чтобы они отображались в верхнем левом углу. Я пытался возиться с полями, даже с заполнением. Кажется, ничего не работает.

Это в значительной степени всего лишь часть небольшого проекта, над которым я работаю, чтобы, я полагаю, перепроектировать некоторые веб-сайты, на которые я захожу, и посмотреть, смогу ли я сделать их копии самостоятельно, не просматривая их код.

  <!DOCTYPE html>
 <head><title></title>

 <link rel="stylesheet" type="text/css" href="stylesheet.css">

 </head>
 <body>
 <ol class="mostPopGames">

 <li class="popGames"><img class="listImage" src="images/homepage    /featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage  /featuredContent/itachi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/kakashi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/tsunade.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/itachi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/kakashi.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/tsunade.jpg"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/340706.png"/></li>

 <li class="popGames"><img class="listImage" src="images/homepage/featuredContent/itachi.jpg"/></li>
 </ol>
 </body>
 </html>

Это CSS…

  ol.mostPopGames{
 margin-left: 0;
 margin-right: 0;
 list-style-type: none;
 }

 ol.mostPopGames li{
 counter-increment: step-counter;}


 ol.mostPopGames li::before{
 content: counter(step-counter);
 margin-right: 5px; 
 font-size: 100%;
 font-weight: bold; 
 padding: 3px 8px;}

 img.listImage{
 width: 20%;
 height: 20%;}

Ответ №1:

Вы можете установить vertical-align: top; в img элемент.

Вот рабочий пример:

 ol.mostPopGames{
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
}

ol.mostPopGames li{
  counter-increment: step-counter;
}
ol.mostPopGames li::before{
  content: counter(step-counter);
  margin-right: 5px; 
  font-size: 100%;
  font-weight: bold; 
  padding: 3px 8px;}

img.listImage{
  width: 20%;
  height: 20%;
}
.mostPopGames li img {
  vertical-align: top;  
}

 <ol class="mostPopGames">
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/FF0000/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/00FF00/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/0000FF/fff"/></li>
</ol>

1. хм, на самом деле это та же проблема. число по-прежнему отображается в левом нижнем углу изображения.

2. Сделал некоторое редактирование, которое создало некоторую проблему. проверьте сейчас 🙂

Ответ №2:

Проверил фрагмент с помощью Dekel, кажется, что счетчик все еще отображается внизу слева.

Таким образом, в дополнение к этому, вы можете установить положение счетчика в абсолютное значение и установить значение 0. Делая это, вам нужно будет добавить поле к фактическому изображению, чтобы переместить его справа от счетчика.

 ol.mostPopGames{
  margin-left: 0;
  margin-right: 0;
  list-style-type: none;
}

ol.mostPopGames li{
  position: relative;
  counter-increment: step-counter;
}
ol.mostPopGames li::before{
  position: absolute;
  content: counter(step-counter);
  margin-right: 5px; 
  font-size: 100%;
  font-weight: bold; 
  padding: 3px 8px;
  top: 0;
}

img.listImage{
  width: 20%;
  height: 20%;
  margin-left: 25px;
}
mostPopGames.mostPopGames li {
  vertical-align: top;  
}

 <ol class="mostPopGames">
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/FF0000/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/00FF00/fff"/></li>
  <li class="popGames"><img class="listImage" src="https://dummyimage.com/150x100/0000FF/fff"/></li>
</ol>

1. в моем примере возникла проблема с css из-за нескольких правок. Теперь вы можете проверить, все ли там работает…

2. Видел ваш обновленный ответ. Гораздо лучшее и более простое решение.

3. Хорошо, оба варианта отлично сработали. Это также работает, просто установив vertical-align:top; в разделе ol.mostPopGames li::перед{} …