Как вытащить элементы одного класса вертикально

Question

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

screen shot

Как я могу это исправить?

.flag {
  width: 15px;
  height: 10px;
  margin-top: 35px;
  margin-bottom: 30px;
}

<input type="image" class="flag" src="flags/china-flag.pdf" href="#">
<input type="image" class="flag" src="flags/india-flag.pdf" href="#">
<input type="image" class="flag" src="flags/united-states-of-america-flag.pdf" href="#">
<input type="image" class="flag" src="flags/indonesia-flag.pdf" href="#">
<input type="image" class="flag" src="flags/pakistan-flag.pdf" href="#">
<input type="image" class="flag" src="flags/brazil-flag.pdf" href="#">

html css

0

Philip Scriver 22 Окт 2019 в 15:30

Answer 1

Спасибо за вашу помощь товарищи кодеры! Я обнаружил проблему, у меня были другие div, которые мешали div class = flag.

0

Philip Scriver 22 Окт 2019 в 12:46

Answer 2

Удалите свойства margin-top и margin-bottom. Смотрите пример ниже.

.flag {
  width: 15px;
  height: 10px;
}

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />
<input type="image" class="flag" src="https://i.stack.imgur.com/2uN67.png" href="#" />

1

Nitheesh 22 Окт 2019 в 12:36

Answer 3

Вы применяете margin-top и margin-bottom к каждому элементу класса .flag. Вместо этого примените поля к контейнеру, который содержит все флаги. Поля в классе .flag должны быть меньше, чтобы сделать флаги ближе.

Также обратите внимание: требуется либо верхнее, либо нижнее поле.

0

Akshit Mehra 22 Окт 2019 в 12:35

Как вытащить элементы одного класса вертикально

3 ответа

Похожие вопросы

Новые вопросы

html