“退出”按钮和徽标不可点击

Question

我有一个用 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;">
      <div style="margin-right: auto;">
          <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="position: absolute; display: flex; justify-content: center; align-items: center; width: 100%;">
      <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>

我的目标是让“退出”按钮和徽标图像都可单击。

Answer 1

如果你使用javascript为其添加一个id，你可以在java中使用onclick事件，或者在html标签内添加一个onclick事件。

要“可点击”，请将光标设置为CSS中这些项目的指针