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

Question

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

 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>

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

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>