如何使整个按钮不仅可点击按钮内的文本？(仅使用HTML和CSS)

gj3fmq9x  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(157)

如何使整个按钮都可以点击，而不仅仅是按钮内部的文本。在这个问题上卡住了一段时间。
我在这里问这个问题之前试着谷歌了一下。但我得到的所有解决方案都不能解决我的问题。

  1. /* Header Buttons Code */
  3. .headerbutton {
  4.   border: 2px solid black;
  5.   background-color: #ffffff;
  6.   float: left;
  7.   cursor: pointer;
  8.   border-radius: 15px;
  9.   margin: 5px;
  10. }
  12. /* Change background color of buttons on hover */
  14. .headerbutton:hover {
  15.   background-color: #6abe97;
  16. }
  18. /* Header Settings */
  20. .header {
  21.   overflow: hidden;
  22.   background-color: #ed0404;
  23.   margin: -8px;
  24. }
  26. /* Links In Header Code */
  28. .header a {
  29.   float: left;
  30.   color: black;
  31.   text-align: center;
  32.   padding: 5px;
  33.   text-decoration: none;
  34.   font-size: 17px;
  35.   line-height: 25px;
  36.   margin: 10px;
  37. }
  39. /* Background Of Links In Header While Hoover */
  41. .header a:hover {
  42.   background-color: #C0A9BD;
  43.   color: black;
  44. }
  46. /* Active Link In Header*/
  48. .header a.active {
  49.   background-color: dodgerblue;
  50.   color: white;
  51. }
  53. /* 3 Buttons Potition Setting In Header */
  55. .header-right {
  56.   float: right;
  57.   padding-top: 20px;
  58.   padding-bottom: 20px;
  59. }
  61. /* Logo Position Setting */
  63. .header-left {
  64.   float: left;
  65.   padding-top: 10px;
  66.   padding-bottom: 10px;
  67. }
  69. /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  71. @media screen and (max-width: 500px) {
  72.   .header a {
  73.     float: none;
  74.     display: block;
  75.     text-align: left;
  76.   }
  77.   .header-right {
  78.     float: none;
  79.   }
  80. }
  82. /*Logo Size Setting */
  84. .logo-container img {
  85.   width: 100px;
  86.   height: 50px;
  87. }
  89. /*Footer Setting*/
  91. .footer {
  92.   position: fixed;
  93.   bottom: 0;
  94.   left: 0;
  95.   width: 100%;
  96.   height: 30px;
  97.   background-color: red;
  98. }
  1. <header>
  2.   <div class="header">
  3.     <div class="header-left">
  4.       <div class="logo-container">
  5.         <a href="index.html"><img src="./media/Logo.png"></a>
  6.       </div>
  7.     </div>
  8.     <div class="header-right">
  9.       <div id="Contact" class="headerbutton">
  10.         <a href="contact.html">Contact Us</a>
  11.       </div>
  12.       <div id="about" class="headerbutton">
  13.         <a href="about.html">About Us</a>
  14.       </div>
  15.       <div id="Cart" class="headerbutton">
  16.         <a href="cart.html">Cart</a>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </header>
css

3条答案

按热度按时间
kcrjzv8t

kcrjzv8t1#

在a标记上添加padding而不是margin。
Padding是元素的内容与其边框之间的空间，另一方面，margin是元素外部的空间
Padding被认为是元素本身的一部分，所以它是可点击的，但margins不是元素的一部分，不响应点击事件。

  1. /* Header Buttons Code */
  3. .headerbutton {
  4.   border: 2px solid black;
  5.   background-color: #ffffff;
  6.   float: left;
  7.   cursor: pointer;
  8.   border-radius: 15px;
  9.   margin: 5px;
  10. }
  12. /* Change background color of buttons on hover */
  14. .headerbutton:hover {
  15.   background-color: #6abe97;
  16. }
  18. /* Header Settings */
  20. .header {
  21.   overflow: hidden;
  22.   background-color: #ed0404;
  23.   margin: -8px;
  24. }
  26. /* Links In Header Code */
  28. .header a {
  29.   float: left;
  30.   color: black;
  31.   text-align: center;
  32.   text-decoration: none;
  33.   font-size: 17px;
  34.   line-height: 25px;
  35.   padding: 10px;
  36.   border-radius: 15px;
  37. }
  39. /* Background Of Links In Header While Hoover */
  41. .header a:hover {
  42.   background-color: #C0A9BD;
  43.   color: black;
  44. }
  46. /* Active Link In Header*/
  48. .header a.active {
  49.   background-color: dodgerblue;
  50.   color: white;
  51. }
  53. /* 3 Buttons Potition Setting In Header */
  55. .header-right {
  56.   float: right;
  57.   padding-top: 20px;
  58.   padding-bottom: 20px;
  59. }
  61. /* Logo Position Setting */
  63. .header-left {
  64.   float: left;
  65.   padding-top: 10px;
  66.   padding-bottom: 10px;
  67. }
  69. /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  71. @media screen and (max-width: 500px) {
  72.   .header a {
  73.     float: none;
  74.     display: block;
  75.     text-align: left;
  77.   }
  78.   .header-right {
  79.     float: none;
  80.   }
  81. }
  83. /*Logo Size Setting */
  85. .logo-container img {
  86.   width: 100px;
  87.   height: 50px;
  88. }
  90. /*Footer Setting*/
  92. .footer {
  93.   position: fixed;
  94.   bottom: 0;
  95.   left: 0;
  96.   width: 100%;
  97.   height: 30px;
  98.   background-color: red;
  99. }
  1. <header>
  2.   <div class="header">
  3.     <div class="header-left">
  4.       <div class="logo-container">
  5.         <a href="index.html"><img src="./media/Logo.png"></a>
  6.       </div>
  7.     </div>
  8.     <div class="header-right">
  9.       <div id="Contact" class="headerbutton">
  10.         <a href="contact.html">Contact Us</a>
  11.       </div>
  12.       <div id="about" class="headerbutton">
  13.         <a href="about.html">About Us</a>
  14.       </div>
  15.       <div id="Cart" class="headerbutton">
  16.         <a href="cart.html">Cart</a>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </header>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-21
tjvv9vkg

tjvv9vkg2#

您应该在<a>元素上使用padding而不是margin来获得所需的大小。边距不计算元素的实际宽度。考虑使用填充。

赞(0）分享  回复(0）举报  2023-10-21
lbsnaicq

lbsnaicq3#

标签中的所有内容都是可点击的。所以把你的div放在a标签里

  1. /* Header Buttons Code */
  3. .headerbutton {
  4.   border: 2px solid black;
  5.   background-color: #ffffff;
  6.   float: left;
  7.   cursor: pointer;
  8.   border-radius: 15px;
  9.   margin: 5px;
  10. }
  12. /* Change background color of buttons on hover */
  14. .headerbutton:hover {
  15.   background-color: #6abe97;
  16. }
  18. /* Header Settings */
  20. .header {
  21.   overflow: hidden;
  22.   background-color: #ed0404;
  23.   margin: -8px;
  24. }
  26. /* Links In Header Code */
  28. .header a {
  29.   float: left;
  30.   color: black;
  31.   text-align: center;
  32.   padding: 5px;
  33.   text-decoration: none;
  34.   font-size: 17px;
  35.   line-height: 25px;
  36.   margin: 10px;
  37. }
  39. /* Background Of Links In Header While Hoover */
  41. .header a:hover {
  42.   background-color: #C0A9BD;
  43.   color: black;
  44. }
  46. /* Active Link In Header*/
  48. .header a.active {
  49.   background-color: dodgerblue;
  50.   color: white;
  51. }
  53. /* 3 Buttons Potition Setting In Header */
  55. .header-right {
  56.   float: right;
  57.   padding-top: 20px;
  58.   padding-bottom: 20px;
  59. }
  61. /* Logo Position Setting */
  63. .header-left {
  64.   float: left;
  65.   padding-top: 10px;
  66.   padding-bottom: 10px;
  67. }
  69. /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  71. @media screen and (max-width: 500px) {
  72.   .header a {
  73.     float: none;
  74.     display: block;
  75.     text-align: left;
  76.   }
  77.   .header-right {
  78.     float: none;
  79.   }
  80. }
  82. /*Logo Size Setting */
  84. .logo-container img {
  85.   width: 100px;
  86.   height: 50px;
  87. }
  89. /*Footer Setting*/
  91. .footer {
  92.   position: fixed;
  93.   bottom: 0;
  94.   left: 0;
  95.   width: 100%;
  96.   height: 30px;
  97.   background-color: red;
  98. }
  1. <header>
  2.   <div class="header">
  3.     <div class="header-left">
  4.       <div class="logo-container">
  5.         <a href="index.html"><img src="./media/Logo.png"></a>
  6.       </div>
  7.     </div>
  8.     <div class="header-right">
  9.      
  10.       <a  id="Contact" class="headerbutton" href="contact.html">Contact Us</a>
  12.       <a id="about" class="headerbutton" href="about.html">About Us</a>
  14.       <a  id="Cart" class="headerbutton" href="cart.html">Cart</a>
  16.     </div>
  17.   </div>
  18. </header>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-21
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com