HTML

Question

我正在 HTML 创建一个网站，一切都很顺利，直到我的代码发生了一些奇怪的事情。当我并排放置 2 个按钮时，a random horizontal line becomes visible. When I click on the button and hold it, the line becomes red. 这与css无关，当我将link放在评论中的css文件时，它仍然出现。

当我查看开发工具时，有一个名为 whitespace in it, but this is nowhere in my code 的元素。

我在网上搜索时，只出现了如何添加空格。

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/main.css">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Zoeken op bedrijf</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="/perSecotr.html">
          <button type="button">Zoeken op sector</button>
        </a>
        <a href="#">
          <button type="button">Zoeken op bedrijf</button>
        </a>
      </nav>
    </header>
    <div>
      <h1>Welk bedrijf wilt u zoeken?</h1>
    </div>
    <div>
      <form autocomplete="off">
        <input type="text" placeholder="Naam van het bedrijf..." id="companyname" required />
        <br>
        <button type="button" id="submit"> Zoeken </button>
      </form>
    </div>
  </body>

  <script src="./js/index.js" type="text/javascript"></script>
</html>

Answer 1

发生这种情况是因为您正在使用 a 标签，默认情况下 text-decoration 设置为 underline。

要解决此问题，您需要添加 css 规则

a {
  text-decoration: none;
}

Answer 2

a:hover {
    text-decoration: none;
}

请将此 css 添加到您的代码中

Answer 3

<a> HTML 元素（或锚元素）默认带有下划线。将 <button> 放在 <a> 元素内是错误的。如果你只打算给出 link，你应该使用删除 <button>.

Answer 4

除了我上面关于删除锚标记的 text-decoration 的评论之外，您可能还想更改按钮的创建方式。就可访问性而言，在锚标记内放置按钮不是一个好习惯，一般来说，这样做是非法的 :) 我建议您单独使用任一按钮或一个标记。资料来源：.

HTML - 随机空白

HTML - random whitespace

whitespace

removing-whitespace