Ненужное пространство после первого элемента в строке - PullRequest
Новая
       19

Ненужное пространство после первого элемента в строке

0 голосов
/ 08 мая 2018

Я создаю список профилей, которые будут отображаться на основе данной категории.Установка делает неудобным использование элемента контейнера для переноса элементов списка, поэтому я использую display:inline-flex для каждого элемента вместо гибкого контейнера с обычным justify-this и align-that.

проблема в том, что первый элемент в строке имеет пробел справа от него, и я не уверен, почему.

Я хотел бы отображать все элементы равномерно, в данном случае 4строка с одинаковым интервалом, без , если возможно, вложив их в родительский контейнер. 

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('.a')[0];
  const repeats = 11;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});
.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="a"></div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Взгляд на инспектор инструментов разработчика показывает немного невидимого кода между первым и вторым элементами:

enter image description here

Когда я удаляю эти строки в инспекторе, разрыв удаляется, и все поля выстраиваются в линию, как и предполагалось.

Так что проблема в добавлении элементов вашего скрипта. Я не уверен, как вы хотите справиться с этим (например, является ли сценарий только для этой демонстрации; проблема только в этой среде IDE? Удаляет первый элемент как параметр?), Поэтому я не буду вдаваться в решения.

0 голосов
/ 08 мая 2018

На самом деле, теперь первый элемент (с пробелом справа) - это элемент, который вы объявили в своем html.Удалите его оттуда и используйте вместо: 

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('<div class="a"></div>');
  const repeats = 12;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});
.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...