如何在 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