Как сделать вывод постов по горизонтали?

Question

[SHADRIN]

Привет, пишу сайт на Python Django, проблема в том что я циклом вывожу записи из бд и они все выводятся строкой
Использовал этот элемент кода но он не работает
CSS

.contents li{
	display: inline;
}

HTML

<div class="contents"> 
	{% block content %}
	{% endblock %}
</div>

Сам код с циклом

{% extends "main/wrapper.html" %}

{% block content %}
  {% for film in posts %}
    <li><a href="/{{film.id}}"><img  src="static\image\moonlight.jpg" width="203" height="291"></a>
    <h3>{{film.title}}</h3></li>
  {% endfor %}

{% endblock %}

Задача состоит в том что бы вывод был по горизонтали, как реализовать?

Answer 1

[approximate solution]

.contents {
  display: flex;
}

и Ваши li выстраиваются по горизонтали.

Comments

[SHADRIN]

не помогло
Ваш пример выводит название и img в строку но следующий пост все равно вертикально
Вот что получилось с вашим кодом

Вот что выводит если без вашего кода

Вот что хочу получить

[approximate solution]

SHADRIN, https://codepen.io/approximate_solution2k20/pen/pojwrbB
Так нужно?

[SHADRIN]

approximate solution, да

[approximate solution]

SHADRIN, пользуйтесь)

[Евгений]

document.querySelector('.contents').parentNode.style.display = 'flex';

xD другого решения с таким количеством информации у меня нет

[SHADRIN]

approximate solution, спасибо, а можете скинуть доку где описаны все эти методы, хочется сделать таблицу что бы изображения стояли на фиксированных местах и тд, а так в целом результат уже лучше

[approximate solution]

SHADRIN, tpverstak.ru/flex-cheatsheet
У вас раскидывает автоматом по родителю - свойство justify-content: space-around, вы можете прописать flex-start, и прописать явные размеры карточкам фильмов через flex-basis. Допустим вы делаете условные значения что в у вас карточка занимает 25% от 100% родителя, и делаете flex-basis calc

[SHADRIN]

approximate solution, большое вам спасибо)