1

Эксперементирую с CSS. Обнаружил такую проблему, хотя margin равен нулю, кнопки все равно находятся на небольшом расстоянии от друг друга. Магия?

Демо: http://w-0rld.ru/news

Помогите их приклеить друг к другу.

Браузер: Chrome 44.0.2403.125 m (может проблема в нём?)

3
  • 1
    Пробелы между элементами есть? 26 сен 2016 в 13:29
  • Переносы строк? Если элементы инлайновые, то вот вам и оно. 26 сен 2016 в 13:30
  • float:left у MenuLink
    – vital mar
    26 сен 2016 в 13:35

2 ответа 2

3

Это проблема display: inline-block;

Вариант 1:

button+button {
  margin-left: -5px;
}

Вариант 2:

Разместить button без переносов.

... <button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button>...

Вариант 3:

button {
  float: left;
}
3
  • Просто и понятно. Спасибо.
    – W_0rld
    26 сен 2016 в 17:43
  • Вариант 1 фиговенький
    – andreymal
    28 сен 2016 в 7:03
  • @andreymal кому что, а я им постоянно пользуюсь и еще не подводил!
    – SVE
    28 сен 2016 в 7:10
2
<div class="Menu">
<button class="MenuLink" id="News"><a href="/news">Новости</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button><!--
--><button class="MenuLink" id="Ticket"><a href="/ticket">Заказать</a></button>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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