Мне пришлось изменить свой код так, чтобы я использовал элементы списка для своего кода и использовал неупорядоченный список для отображения каждого элемента, а затем использовал CSS для группировки каждого элемента.
Сейчас я использую div. Я пробовал использовать один большой URL-адрес, в котором каждая страна была бы элементом списка, но формат был бы другим. Я также попытался заменить свой div на li и обернуть все это в ul, но мне это не удалось. Вот фрагмент двух стран из 20.
.country-container { дисплей: гибкий; flex-wrap: обертка; оправдание-содержание: пространство между; разрыв: 10 пикселей; } /* Стиль для каждого блока страны */ .страна { гибкий: 1; дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; граница: 3 пикселя, сплошная #212020; отступ: 1em; /* При необходимости увеличиваем отступы для интервалов внутри каждой страны */ выравнивание текста: по центру; цвет фона: бежевый; } /* Стиль изображения флага */ .флаг { /* Здесь нет необходимости в дополнительных стилях */ } /* Стиль названия страны */ .country h2 { поле: 5 пикселей 0; } /* Стиль ссылки на Википедию */ .вики-ссылка { дисплей: блок; выравнивание текста: по центру; поле сверху: 5 пикселей;

Самоа Валюта: евро (EUR)
Регионы: Атуа, Фаасалелега, Туамасага
Википедия

Пакистан
Валюта: рупия (PKR)
Регионы: Азад Джамму и Кашмир, Белуджистан, Гилгит-Балтистан, Исламабад, Хайбер-Пахтунхва, Пенджаб, Синд.
Википедия
Мобильная версия