如何在 html 中为我的链接添加背景栏？

Question

这是我的代码：

 a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; position: center; top: 0%; margin: 0px 0 0 0px; height: auto; width: auto; font-family: cursive; } a:hover, a:active { background-color: green; color: white; }

 <a href="1st_Page.html" target="_blank">1st</a> <a href="2nd_Page.html" target="_blank">2nd</a> <a href="3th_Page.html" target="_blank">3rd</a>

Answer 1

假设您的意思是某种用于放置按钮的容器，请将其包装在 div 中：

 a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; position: center; top: 0%; margin: 0px 0 0 0px; height: auto; width: auto; font-family: cursive; } a:hover, a:active { background-color: green; color: white; } .container { background: red; padding: 0.5em; }

 <div class="container"> <a href="1st_Page.html" target="_blank">1st</a> <a href="2nd_Page.html" target="_blank">2nd</a> <a href="3th_Page.html" target="_blank">3rd</a> </div>

Answer 2

您可以将它们包装在 div 中并提供背景

 div { background: blue; padding: 12px; } a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; position: center; top: 0%; margin: 0px 0 0 0px; height: auto; width: auto; font-family: cursive; } a:hover, a:active { background-color: green; color: white; }

 <div> <a href="1st_Page.html" target="_blank">1st</a> <a href="2nd_Page.html" target="_blank">2nd</a> <a href="3th_Page.html" target="_blank">3rd</a> </div