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

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

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

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 Я не могу вставлять изображения прямо сейчас, поэтому я получил эту ссылку, чтобы показать, как это происходит прямо сейчас, я хочу, чтобы числа были выровнены в одну строку.

Похоже, вы производите что-то похожее на стол? Вы не думали об использовании стола?

Iain Shelvington 27.05.2019 20:52

Я не хочу использовать таблицу, я хочу использовать эту структуру, это именно то, что я искал, просто нужно выровнять числа

yassoplaya 27.05.2019 20:58

укажите ширину каждого пролета

HenryM 27.05.2019 20:59

@HenryM Например, класс дает фиксированное значение и дает каждому диапазону этот класс?

yassoplaya 27.05.2019 21:02

да, через класс. Если у вас есть класс LHS (левая сторона) и класс RHS (правая сторона), то они должны выстраиваться вертикально

HenryM 27.05.2019 21:05

Я пытался указать фиксированную ширину, но она совсем не изменилась, можете ли вы точно показать, как я должен это сделать? Должен ли я добавлять/удалять строки из моих классов css?

yassoplaya 27.05.2019 21:07
Почему в Python есть оператор "pass"?
Почему в Python есть оператор "pass"?
Оператор pass в Python - это простая концепция, которую могут быстро освоить даже новички без опыта программирования.
Некоторые методы, о которых вы не знали, что они существуют в Python
Некоторые методы, о которых вы не знали, что они существуют в Python
Python - самый известный и самый простой в изучении язык в наши дни. Имея широкий спектр применения в области машинного обучения, Data Science,...
Основы Python Часть I
Основы Python Часть I
Вы когда-нибудь задумывались, почему в программах на Python вы видите приведенный ниже код?
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
LeetCode - 1579. Удаление максимального числа ребер для сохранения полной проходимости графа
Алиса и Боб имеют неориентированный граф из n узлов и трех типов ребер:
Оптимизация кода с помощью тернарного оператора Python
Оптимизация кода с помощью тернарного оператора Python
И последнее, что мы хотели бы показать вам, прежде чем двигаться дальше, это
Советы по эффективной веб-разработке с помощью Python
Советы по эффективной веб-разработке с помощью Python
Как веб-разработчик, Python может стать мощным инструментом для создания эффективных и масштабируемых веб-приложений.
0
6
101
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме