为什么我的超链接div会延伸到整个页面？

Question

这个div位于一个'page-container'div中,里面有一个'content div',但问题可以在没有这些内容的情况下重现(如下面的小提琴中所示).

HTML:

<a href="http://www.example.com"><div class="download_link">Download PDF</div></a>

CSS:

.download_link {
    margin: 0 auto;
    width: 200px;
    border-radius: 5px;
    transition: 0.5s;
    background-color: lightblue;
    text-align: center;
    font-family: 'Source Serif Pro';
    font-weight: 600;
    font-size: 25px;
}

.download_link:hover {
    transition: 0.5s;
    background-color: limegreen;
}

div正确链接,甚至在悬停时改变颜色.但链接延伸到整个容器.我试过改变各种事物的宽度.

>>> 方便的JSFiddle <<<

Answer 1

默认情况下,通用除法(div)是块元素.无论宽度如何,块都会在父级内部占据整行.在您的情况下,div的父级是一个锚标记,默认情况下是内联的.内联,喜欢绝对元素,内联块和浮点数,收缩包裹他们的孩子.内联中的块固有地想要"拥有"一条线到自身,这就是为什么它使其父元素伸展到其父元素的右边缘和左边缘的原因body.

弗兰基,把一个div放在一个锚中是没有意义的.你真正需要的只是一个用于其目的的锚标签.而且,有趣的是,如果您将锚点显示为块,则可点击链接区域将只是锚点的宽度.您拥有较少的标记和所需的功能.

这是jsfiddle:http://jsfiddle.net/hhm46/2/.

这是HTML:

<a href="http://www.example.com/manual.pdf">Download PDF</a>
<p>Sample paragraph</p>

这是CSS:

a[href $= ".pdf"] {
    display: block;
    margin: 0 auto;
    width: 200px;
    border-radius: 5px;
    transition: background-color 0.5s;
    background-color: lightblue;
    text-align: center;
    font-family: 'Source Serif Pro';
    font-weight: 600;
    font-size: 25px;
}

a[href $= ".pdf"]:hover {
    transition: 0.5s;
    background-color: limegreen;
}