Question

我用css看到了我想要的样子。一个居中的<p>和<div>一个位于另一个之上，它们都包含在<a>个标签中。

现在我的问题是<a>标签适用于整个页面宽度，我只想点击实际内容所在的链接。

示例链接： https://jsfiddle.net/vinko_k_design/dge4fx2z/

Answer 1

将锚标记放在p标记内。

 <p class="page-nav"><a href="#map">Check out our Map</a></p>

Answer 2

使用span（内联元素）代替div / p（块元素），并将text-align属性移至上一级将解决您的问题。如下：

＆＃13;

.page-nav-buttons {
    text-align: center;
}

.page-nav {
}

.page-nav-img {
    width: 20px;
    height: 20px;
    background-color: red;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

＆＃13;

<div class="page-nav-buttons">
    <a href="#map">
        <span class="page-nav">Check out our Map</span>
    </a>
    <br/>
    <a href="#map">
        <span class="page-nav-img"></span>
    </a>
</div>

＆＃13;

Answer 3

试试这个

https://jsfiddle.net/dge4fx2z/1/

 <div class="page-nav-buttons">
  <p class="page-nav"> <a href="#map">
    Check out our Map
 </a>

 </p> <span class="page-nav-img">
 <a href="#map">

     <span class="page-nav-img"></span>

 </a>
 </span>
</div>

如何使锚标签适合内容？不是页面的整个宽度

3 个答案: