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 that you have read and understand our privacy policy and code of conduct.

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