Блог

Главная - Вопросы по программированию - Возникли проблемы с созданием горизонтальных кнопок

Возникли проблемы с созданием горизонтальных кнопок

#css #button #navigation #row

#css #кнопка #навигация #строка

Вопрос:

Как мне исправить эту панель навигации? Я пытался сделать это самостоятельно, но у меня просто не получается заставить все работать.

Эта кнопка находится во всех трех состояниях:

Красный фон — это #490000 и это должен быть отдельный div.

Текст поверх кнопок является пользовательским шрифтом, но в данном случае это не имеет значения.

Ответ №1:

Я собрал рабочий образец, который вы могли бы изучить. Можете ли вы подробнее рассказать, где у вас были проблемы, чтобы я мог объяснить решение?

Комментарии:

1. Большое вам спасибо! Извините, что я пока не могу проголосовать… Проблема, с которой я столкнулся, заключалась в том, что я не мог заставить изображение кнопки отображаться полностью. Это было вырезано независимо от того, какие размеры я ввел в CSS…

2. Аааа, скорее всего, ваша проблема заключалась не в установке вашего якоря на display: block . Если вы посмотрите на мой пример, попробуйте эту настройку в разделе a { — — display: inline , а не в блоке. редактировать: Причина этого в том, что якоря по умолчанию обрабатываются как встроенные элементы в большинстве браузеров. Установив их для отображения в виде блочных элементов, они ведут себя больше как, например, div.

3. Ты потрясающий, спасибо! Я не мог понять, что было не так, и вы правы, это было из-за встроенного блока… У меня, конечно, будет больше вопросов, поскольку я только изучаю CSS, создавая свой собственный сайт… Приветствия!

4. Абсолютно. Если будет только 4 элемента, попробуйте что-то вроде этого . Я просто присвоил каждому элементу списка идентификатор, затем присвоил идентификатору внешних элементов списка дополнительное поле на их внутренней стороне. Например: #home {margin-right: 30px;} .

5. Кроме того, там, где я настроил li для использования display: inline-block , вы могли бы заменить эту строку на float: left; . Плавающие элементы имеют очень уникальное и специфическое поведение в css, поэтому с ними полезно поэкспериментировать. Кроме того, display: inline-block не полностью поддерживается Internet Explorer. Определенно поиграйте с этим!