Не может правильно выровнять список

enter image description here

Как вы можете видеть, мой список выравнивается случайным образом, и я не знаю почему. Есть идеи?

html:

{% if shop_name %}
      <ol>
        {% for library in shop_name %}
        <li>Video Library Info</li>
        <ul>
          <li>Name : {{library.shop_name}}</li>
          <li>Adress : {{library.adress}}</li>
          {% comment %} <button id="btn_goto" onclick="">Select</button> {% endcomment %}
        </ul>
        {% endfor %}
      </ol>
      {% else %}
      <p>ERROR</p>
      {% endif %}

css код: 


body {
    text-align: center;
    color: #FFA000;
    background-color: #911E42;
}

ol {
    display: table;
    text-align: left;
    margin: 0 auto;
    margin-bottom: 20px;
}

ul {
    display: table;
    margin: 0 auto;
    vertical-align: baseline;
    text-align: left;
}

Итак, в css я указал, что текст в списке должен быть выровнен по левому краю, но все равно это не помогает, и он выравнивается произвольно, как я думаю. Мне нужно выровнять каждый li из ul по левой стороне

Удалите display: table из селектора ul и все должно быть правильно выровнено.

Удаление

display: table; может облегчить вам жизнь, а если это не сработает. Попробуйте использовать display: flex на родителе и использовать justify-content: center; и align-items: center;, чтобы он был в середине

Вернуться на верх