Кнопка «Выход» и логотип не кликабельны
У меня есть строка меню, которую я создал с помощью HTML и CSS.
У меня есть кнопки, расположенные посередине строки меню, и они работают отлично. Моя проблема в том, что кнопки на крыльях, кнопка «Выйти» и кнопка с логотипом, не нажимаются. Эти две кнопки хорошо выровнены и расположены правильно, но я почему-то не могу их нажать.
<div style = "background-color: #f8f9fa; padding: 0px; border-bottom: 1px solid #ccc;">
<div style = "display: flex; align-items: center; height: 70px; position: relative;justify-content: space-between;">
<div>
<a href = "https://www.test.com/" style = "text-decoration: none;">
<img src = "static/LOGO 1.png" alt = "Logo" style = "max-height: 60px; margin-left: 15px;">
</a>
</div>
<div id = "hamburger" style = "display: none; cursor: pointer; margin-right: 15px;">
<div style = "width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
<div style = "width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
<div style = "width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
</div>
<div id = "menu-items" style = "display: flex; justify-content: center; align-items: center;">
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.test.com/myclips" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Clips</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ myclips }}
</span>
</div>
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.test.com/myhighlights" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Highlights</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ myhighlights }}
</span>
</div>
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.test.com/mymatches" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Matches</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ mymatches }}
</span>
</div>
</div>
<div style = "margin: 0px; display: flex; align-items: right;">
<a href = "https://www.test.com/logout" style = "background-color: #00bbff; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; margin-right: 15px; font-weight: 700; text-decoration: none;">Sign Out</a>
</div>
</div>
<div id = "mobile-menu" style = "display: none; background-color: #f8f9fa; position: absolute; top: 100px; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000;">
<a href = "https://www.test.com/myclips" style = "padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
My Clips
<span style = "margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ myclips }}
</span>
</a>
<a href = "https://www.test.com/myhighlights" style = "padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
My Highlights
<span style = "margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ myhighlights }}
</span>
</a>
<a href = "https://www.test.com/mymatches" style = "padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
My Matches
<span style = "margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
{{ mymatches }}
</span>
</a>
</div>
</div>Моя цель — сделать так, чтобы кнопка «Выход» и изображение логотипа были кликабельными.
@flpms Я забыл скопировать последнюю строку. Зафиксированный
@Дэвид, я попробовал, но теперь средние пункты меню выровнены по правому краю, а кнопки по-прежнему не нажимаются.
Совет: встроенные стили — это кошмар для всех участников. С его помощью очень сложно анализировать макет, а внесение изменений требует тонны повторяющейся работы. Пожалуйста, используйте CSS с классами с интуитивно понятными именами для повторного использования.
Самое последнее обновление кода в вопросе больше не демонстрирует проблему...
@Дэвид Но на больших экранах, больше, чем этот фрагмент, по какой-то причине это не работает.
@Дэвид Это работает на маленьких экранах.
@U13-Forward: «Это не работает» не является четким или конкретным описанием проблемы. Пользовательский интерфейс делает то, что я от него ожидаю, когда тестирую, независимо от размера экрана. Какой именно размер экрана вы тестируете и какую конкретную проблему вы наблюдаете? Если вы наблюдаете эту проблему в приведенном выше фрагменте кода, а я нет, то это может быть связано с браузером, тестировали ли вы его в нескольких браузерах?
@David Размер моего компьютера 12,8 x 7,2 дюйма, и я наблюдаю, что кнопки на крыльях не нажимаются. Я использую Chrome, проверил Edge, и там он тоже не работает. И размеры 1920х1080.
@U13-Forward: Тестирование приведенного выше фрагмента кода в этом разрешении не выявило для меня описанной проблемы. Исходный код в вопросе был, но с тех пор обновления, внесенные в вопрос, похоже, незаметно исправили проблему, когда я ее тестировал.
Ответы 3
Если вы используете JavaScript, добавьте для него идентификатор, и вы можете использовать событие onclick в Java или добавить событие onclick внутри тега html.
Чтобы быть «кликабельным», установите курсор на указатель в CSS для этих элементов.
Пожалуйста, смотрите Как спросить . Решения должны быть конкретными, по возможности показывая код. Кроме того, не пишите в txtspk. Пишите как профессионал, на настоящем английском языке. Посетите тур, чтобы узнать, как работает этот сайт.
добавьте ссылку на официальную документацию, пожалуйста
<div id = "menu-items"> оформлен так, чтобы соответствовать полной ширине контейнера, поэтому у него есть пустое пространство, закрывающее другие элементы под ним.
Удалите его абсолютное позиционирование и 100% ширину, а также удалите автоматическое поле из первой части заголовка и используйте space-between в их общем родительском элементе для их распределения. Например:
<div style = "background-color: #f8f9fa; padding: 0px; border-bottom: 1px solid #ccc;">
<div style = "display: flex; align-items: center; height: 70px; position: relative;justify-content: space-between;">
<div>
<a href = "https://www.example.com/test" style = "text-decoration: none;">
<img src = "static/LOGO 1.png" alt = "Logo" style = "max-height: 60px; margin-left: 15px;">
</a>
</div>
<div id = "menu-items" style = "display: flex; justify-content: center; align-items: center;">
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.example.com/test" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
100
</span>
</div>
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.example.com/test" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
100
</span>
</div>
<div style = "margin: 0 20px; display: flex; align-items: center;">
<a href = "https://www.example.com/test" style = "text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
<span style = "background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
100
</span>
</div>
</div>
<div style = "margin: 0px; display: flex; align-items: right;">
<a href = "https://www.example.com/logout" style = "background-color: #00bbff; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; margin-right: 15px; font-weight: 700; text-decoration: none;">Sign Out</a>
</div>
</div>
</div>В целом, CSS flexbox может многое для стилизации ваших элементов. Лучше использовать это, чем пытаться вручную позиционировать объекты, используя комбинации абсолютного позиционирования, полей, ложной ширины и т. д.
Спасибо за Ваш ответ! Однако это не работает, я отредактировал свой полный код в вопросе, не могли бы вы взглянуть, спасибо!
@U13-Forward: Что в этом «не работает»? Когда я тестирую фрагмент кода в этом ответе, все 5 ссылок доступны для кликов, а центральные элементы остаются по центру.
Я понял, что это работает на меньших экранах
Но на больших экранах, больше этого фрагмента, это почему-то не работает.
Размер моего компьютера 12,8 x 7,2 дюйма, и я заметил, что кнопки на крыльях не нажимаются. Я использую Chrome, проверил Edge, и там он тоже не работает. И размеры 1920х1080.
@ U13-Forward: тестирование приведенного выше фрагмента кода в этом разрешении не воспроизводит проблему для меня. Обратите внимание, что опубликованный ответ основан на исходном вопросе, а не на обновленном вопросе, который также не демонстрирует проблему.
Я попробовал еще раз, та же проблема, теперь средние кнопки в строке меню тоже не выровнены должным образом.
@U13-Forward: Тогда с вашим браузером что-то еще не так. Когда я тестирую фрагмент кода из ответа выше в Chrome, все 5 ссылок становятся кликабельными и успешно переходят к example.com.
Я понял, что моя проблема: это еще один div, о существовании которого я понятия не имел. Я приму и проголосую, так как вы помогли мне правильно организовать мой код.
Это происходит часто, когда другие элементы закрывают кнопку. Третье изображение полностью закрывает кнопку. Вы можете превратить его в свертываемое меню, а затем отобразить все элементы в списке или перенести кнопку во вторую строку.
Похоже, у вас сломанный HTML. Проверьте второй тег div и попробуйте закрыть его правильно.