Мастерская: создаём меню / Что делать, если пункты не влезают? [17/28]
×

Что делать, если пункты не влезают? [17/28]

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

На самом деле никак. Всегда может возникнуть ситуация, когда что-то не влезло, её не избежать. Но предусматривать такую ситуацию надо.

Главное правило — ссылки в меню должны быть доступны и видимы при любых обстоятельствах. Пусть они переносятся на другую строку и меню выглядит не так красиво, но главное, что ссылки видны.

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


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Что делать, если пункты не влезают?</title> </head> <body> <ul class="main-menu"> <li><a href="#company">О нашей компании</a></li> <li><a href="#services">Наши вам услуги</a></li> <li><a href="#team">Все наши сотрудники</a></li> <li><a href="#contacts">Наши контакты</a></li> </ul> </body> </html>
CSS
body { padding: 10px; font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.4; } .main-menu { margin: 0; padding: 10px 15px; list-style: none; background: #f5f5f5; border: 1px solid #e5e5e5; } .main-menu li { display: inline; margin-right: 5px; } .main-menu a { color: #0088cc; }
HTML Academy
  1. Запретите перенос строки внутри пунктов меню.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.