如何使具有不同文本大小的列中的所有链接与 HTML 和 CSS 中的行的大小相同？

Question

我正在写一个网站，想制作一个像按钮一样的 link 列（是一个块状，当您将鼠标悬停在上面并单击它时，它会改变颜色，等等）。我的代码目前看起来像这样：

function search() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("input");
    filter = input.value.toUpperCase();
    div = document.getElementById("dropdown");
    a = div.getElementsByTagName("a");
    for (i = 0; i < a.length; i++) {
        txtValue = a[i].textContent || a[i].innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            a[i].style.display = "";
        } else {
            a[i].style.display = "none";
        }
    }
}

html {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(img/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

#title {
  background-color: brown;
  margin-left: 8%;
  margin-right: 10%;
  width: 85%;
}

h1 {
  font-weight: 200;
  font-size: 800%;
  padding-top: 2%;
  color: white;
}

h2 {
  font-weight: 100;
  font-size: 200%;
  color: white
}

.dropdown {
  width: 34%;
  margin-left: 32%;
  background-color: cornflowerblue;
}

.dropdown a {
  text-decoration: none;
  font-size: 26px;
  width: 20%;
  color: white;
  transition: background-color 0.5s, color 0.5s;
}

.dropdown a:active,
.dropdown a:hover {
  background-color: brown;
}

#input {
  width: 98%;
  height: 40px;
  font-size: 25px;
  background-color: black;
  color: white;
}

<body>
  <script src="script.js"></script>
  <h1 id="title">My stuff</h1>
  <h2>To be directed to the correct thing, click on the corresponding item on the menu.</h2>
  <div id="dropdown" class="dropdown">
    <input type="text" placeholder="Search for a project" id="input" onkeyup="search()">
    <a href="projects/something.html">Blank</a><br>
    <a href="">Another Blank</a><br>
    <a href="">Even More Blanks</a><br>
    <a href="">Final Blank</a><br>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

我希望，当您将鼠标悬停在该列的不同 link 上时，整行都会改变颜色。此外，我希望整行成为 link 的一部分（即，您可以单击该行的任意位置，它将带您到 link 被 link 编辑到的任何位置。）。提前致谢！！

Answer 1

你的代码结构不是很好，需要改一下。尝试在 dropdown 中使用 ul。当然这个例子不是最好的，但它可以达到你想要的效果。

html {
  font-family: "Titillium Web", sans-serif;
  font-weight: 400;
  text-align: center;
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url(img/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
}

#title {
  background-color: brown;
  margin-left: 8%;
  margin-right: 10%;
  width: 85%;
}

h1 {
  font-weight: 200;
  font-size: 800%;
  padding-top: 2%;
  color: white;
}

h2 {
  font-weight: 100;
  font-size: 200%;
  color: white
}

.dropdown {
  width: 34%;
  margin-left: 32%;
  background-color: cornflowerblue;
}
.dropdown ul{
  list-style:none;
  padding:0;
  margin:0;
}
.dropdown a {
  text-decoration: none;
  font-size: 26px;
  display:block;
  color: white;
  transition: background-color 0.5s, color 0.5s;
}

.dropdown a:active,
.dropdown a:hover {
  background-color: brown;
}

#input {
  width: 98%;
  height: 40px;
  font-size: 25px;
  background-color: black;
  color: white;
}

<body>
  <script src="script.js"></script>
  <h1 id="title">My stuff</h1>
  <h2>To be directed to the correct thing, click on the corresponding item on the menu.</h2>
  <div id="dropdown" class="dropdown">
    <input type="text" placeholder="Search for a project" id="input" onkeyup="search()">
    <ul>
      <li>
       <a href="projects/something.html">Blank</a><br>
      </li>
      <li>
       <a href="">Another Blank</a><br>
      </li>
      <li>
       <a href="">Even More Blanks</a><br>
      </li>
      <li>
       <a href="">Final Blank</a><br>
      </li>
    </ul>
    
   
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

如何使具有不同文本大小的列中的所有链接与 HTML 和 CSS 中的行的大小相同？

How to make all links in a column with different sizes of text the same size as the row in HTML and CSS?

html

css

rows

hyperlink