1

Есть следующий HTML/CSS:

a {
  margin: 0 20px;
}
Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

Вопрос - как убрать отступы между ссылками и словами Some Words...? т.е. чтобы первая ссылка была прижата к словам Some Words... и последняя ссылка тоже.

введите сюда описание изображения

Должно быть так:

введите сюда описание изображения

Конечно, можно сделать что то вроде такого:

a {
  margin: 0 20px;
}
.words_1 {
   display: inline-block;
   margin-right: -20px;
}
.words_2 {
   display: inline-block;
   margin-left: -20px;
}
<div class="words_1">Some Words...</div>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<div class="words_2">Some Words...</div>

Но это весьма грубое и некрасивое решение. Как еще можно выполнить поставленную задачу?

1 ответ 1

0

При такой разметке с отступами всё почти хорошо, но остаются пробелы:

a + a {
  margin-left: 20px;
}
Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

которые можно убрать:

a + a {
  margin-left: 20px;
}
Some Words...<a href="#">Text</a><a href="#">Text</a><a href="#">Text</a><a href="#">Text</a>Some Words...

body {
  display: flex;
  flex-wrap: wrap;
}

a + a {
  margin-left: 20px;
}
Some Words...
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
<a href="#">Text</a>
Some Words...

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.