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正确链接，甚至在悬停时更改颜色。但链接延伸到整个容器。我试过改变各种事物的宽度。

＆GT;＆GT;＆GT; Convenient JSFiddle＆lt;＆lt;＆lt;

Answer 1

默认情况下，通用除法（div）是一个块元素。无论宽度如何，块都会在父级内部占据整行。在您的情况下，div的父级是一个锚标记，默认情况下是内联的。内联，喜欢绝对元素，内联块和浮点数，收缩包裹他们的孩子。内联中的块本身就想要＆＃34;有＆＃34;自己的一条线，这就是为什么它使其父级伸展到其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;
}

Answer 2

你应该将锚标签包装在div内，而不是外面。 Fiddle.

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

Answer 3

简单，div默认为块级元素。将其更改为display:inline-block或display:inline。

内联块演示：http://jsfiddle.net/3Ld8U/2/

虽然正如@josh所说，你可能最好将a置于div

之内

Answer 4

两种方法：

我找到了一个解决方法：

<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a  href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>

如果您希望锚标记像其他人推荐的那样进入div，我建议您增加锚标记的填充，使其延伸到边框的边缘。

.download_link a {
padding: 0 20px 0 20px;
}

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

4 个答案: