Как выровнять пролеты в одну строку

Question

Здравствуйте, ребята, у меня есть div в шаблоне django, которые созданы циклом Django for. У меня есть 2 пролета в одном делении, разделенных на большое количество пробелов, я хочу сделать так, чтобы выровнять вторые пролеты с вкладкойкласс в одну строку, как мне это сделать?

Я пытался добавить отступы, поля, но это не сработало

HTML:

<div>
     {% for entries in mylist %}
   <div class="ladder"> <span class="player"> {{ entries.0 }}</span> <span class="tab"> {{ entries.1 }} </span></div>
     {% endfor %}


</div>

CSS:

player { margin-left: 20px; 
    }

   .ladder{ width: 30%;
   border: solid 2px blue;
   margin-left: 20px;
   margin-bottom: 30px;
 }

   .tab { 

       margin-left: 40%;  }

https://i.stack.imgur.com/alGa7.png Я не могу встраивать картинки прямо сейчас, поэтому я получил эту ссылку, чтобы показать, как это сейчас, что я хочу, чтобы числа были выровнены в одну строку.

Answer 1

dl {
  width: 100%;
  overflow: hidden;
  background: #ff0;
  padding: 0;
  margin: 0
}
dt {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #cc0;
  padding: 0;
  margin: 0
}
dd {
  float: left;
  width: 50%;
  /* adjust the width; make sure the total of both is 100% */
  background: #dd0
  padding: 0;
  margin: 0
}

<dl>
  <dt>Mercury</dt>
  <dd>Ερμής</dd>
  <dt>Venus</dt>
  <dd>Αφροδίτη</dd>
  <dt>Earth</dt>
  <dd>Γη</dd>
</dl>