Question

我想使链接仅在文本上可单击。问题是链接也可以在文本右侧的任意位置单击。如何使链接只能在文本上单击？我已经在网站的一部分中包含了问题所在，该问题出在导航栏底部的链接中。感谢您的建议！

<head>
 
  <style>
    .topnav {
        background-color: #F2C369;
        overflow: hidden;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

    .topnav a:hover {
        background-color: red;
        color: white;
    }

    .topnav a.active {
        background-color: #e3ef34;
        color: black;
    }


    .sidebar {
        background-color: #FCEFDC;
        width: 20%;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        position: absolute;
        left:0px;
    }

    .links-box {
        background-color: none;
        width: 100%;
        border: 1px solid black;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        padding: 10px;
    }

    .links-box a {
        display: block;
    }

  </style>

</head>

<body>

  <div class="topnav">
      <a href="index.html">Main</a>
      <a href="all-articles.html">All</a>
      <a href="about.html">About</a>
      <a href="gallery.html">Gallery</a>
      <a href="contact.html">Contact</a>
  </div>

  <div class="content-container">

      <div class="sidebar">

          <div class="links-box">
              <div class="link-header">Header</div>
              <a href="">Link 1</a>
              <a href="">Link 2</a>
          </div>
      </div>            
  </div>
</body>

Answer 1

使用以下方法更新您的.links-box a：

.links-box a {
    display: block;
    float: left;
    clear: both;
}

Answer 2

在<a href="">中包装链接（div），并从CSS中删除.links-box a { display: block;}

<head>
 
  <style>
    .topnav {
        background-color: #F2C369;
        overflow: hidden;
        max-width: 70%;
        margin-left: auto;
        margin-right: auto;
    }

    .topnav a {
        float: left;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

    .topnav a:hover {
        background-color: red;
        color: white;
    }

    .topnav a.active {
        background-color: #e3ef34;
        color: black;
    }


    .sidebar {
        background-color: #FCEFDC;
        width: 50%;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        position: absolute;
        left:0px;
    }

    .links-box {
        background-color: none;
        width: 100%;
        border: 1px solid black;
        display: inline-block;
        box-sizing: border-box;
        float: left;
        padding: 10px;
    }

    

  </style>

</head>

<body>

  <div class="topnav">
      <a href="index.html">Main</a>
      <a href="all-articles.html">All</a>
      <a href="about.html">About</a>
      <a href="gallery.html">Gallery</a>
      <a href="contact.html">Contact</a>
  </div>

  <div class="content-container">

      <div class="sidebar">

          <div class="links-box">
              <div class="link-header">Header</div>
              <div><a href="">Link 1</a></div>
              <div><a href="">Link 2</a></div>
          </div>
      </div>            
  </div>
</body>

Answer 3

更改CSS的这一部分：

.topnav {
   padding: 14px 16px;
}
     a {
        float: left;
        color: black;
        text-align: center;
        margin: 10px;
        text-decoration: none;
        font-size: 17px;
        font-weight: bold;
    }

Answer 4

用下面的无序列表替换包含“链接1”和“链接2”的锚标记。

            <ul>
                <li>
                    <a href="">Link 1</a>
                </li>
                <li>
                    <a href="">Link 2</a>
                </li>
            </ul>

，然后还添加以下CSS。

ul li{
    list-style: none;
}
ul{
    margin:0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px; 
}

最后删除以下css块

.links-box a {
    display: block;
}

这应该可以完成您的工作。

如何使链接仅在文本上可点击

4 个答案: