How to align side by side the li tag inside the for loop in html flask jinja2?

Question

How do I align side by side the tag li within the loop for in flask

{% for g in groups %}
<div class='circle'>
   <ul class="circle-list">
      <li class="group">
         <a href="/layers">
            <svg id="{{g.id}}" width="250" height="250" onclick="funcaoBotao({{ g.id }});">
               <circle cx="95" cy="95" r="85" />
               <text x="38%" y="40%" text-anchor="middle" fill="white" font-size="16px" font-family="Arial" dy=".3em">{{ g.name }}</text>
            </svg>
         </a>
</div>
{% endfor %}

Answer 1

First, don’t forget to close the tags <ul> and <li> which are open but not closed.

Then, to accomplish this you need to use css. Create a css file that references this html code. In this css file write:

ul {
  display: flex;
}

I think it will work.