Question

我在某些文本下面有一个div按钮，并提供了以下css：

<div id="text">
    <h1>Lorem ipsum <b>dolor</b></h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
    <a href="blog">
        <div id="blog_button">Blog</div>
    </a>
</div>

div#blog_button {
width:90px;
height:30px;
background-color:#E31F2D;
border-radius:2px;
text-align:center;
vertical-align:middle;
line-height:30px;
margin-top:20px;

}

当鼠标悬停在div上时，默认鼠标会更改为指针越过按钮的右手边缘，直到其容器div的边缘，而不是仅仅超过按钮。我怎么能阻止这个？我只想把它放在按钮上。

Answer 1

这是因为div是块级元素，块级元素占用尽可能多的水平空间而不设置宽度。您可以通过将display: inline-block;属性添加到div#blog_button来解决此问题：

JSFiddle - DEMO

div#blog_button {
    display: inline-block; /* add this */
    width:90px;
    height:30px;
    background-color:#E31F2D;
    border-radius:2px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    margin-top:20px;
}

Answer 2

因为div是块元素。块元素延伸到包含元素的整个宽度。如果你在你的风格中加上display：inline来修复它。

鼠标悬停在指针周围的div按钮上，为什么？

2 个答案: