Div 可在整个页面宽度上点击，即使页边距设置为小于距离

Question

好的，所以我遇到了一个奇怪的问题。

我一直在为一个学校项目开发一个小网站，我需要一个侧面的按钮面板。所以我制作了一些 div 并将它们 link 放到我的其他页面等等。

但随后出现了一个奇怪的问题。我可以单击 divs 的区域并不局限于页边距区域，而是超出了页面水平轴的整个长度，而不是垂直轴。

我曾尝试四处寻找解决此问题的方法，但似乎找不到。我也曾尝试更改 div 的边距，但似乎没有任何效果。

这是我的 div 和 link

的 HTML 代码

<a href="main.html">
        <div class="MenuTop">
            <p id="MenuTextOn">Forside</p>
        </div>
    </a>

这是与 div 元素关联的 CSS 代码。

.MenuTop {
position: relative;
border-width: 3px;
border-style: solid;
border-color: black;
width: 70px;
height: 60px;
border-radius: 15px 30px;
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
margin: 15px;

需要注意的是，我是新手，但了解基本原理。

感谢您提前提供帮助！ :D

Answer 1

您不需要将 div 放在 a 元素中，只需将 a 的样式设置为 display:block 开头（将其作为 div 默认):

让我们更好地组织 CSS

.MenuTop {
    /* positioning */
    position: relative;

    /* box-model */
    display: block;
    width: 70px;
    height: 60px;
    margin: 15px;
    border-width: 3px;
    border-style: solid;
    border-color: black;

    /* style */
    background: -webkit-linear-gradient(bottom right, gray, #F0F0F0);
    border-radius: 15px 30px;
    opacity: 1;

    /* effects */
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

看这里：https://jsfiddle.net/7063nkfg/

Answer 2

阅读 HTML - http://www.impressivewebs.com/difference-block-inline-css/

中的内联元素和块元素

P.S.You 不需要将 DIV 和 P 标签放入 A，这会让你的代码难以阅读和理解。

使用以下样式使一切更简单：

html:

<div>
    <a href="#" class="menu">Text1</a> 
    <a href="#" class="menu">Text2</a> 
    <a href="#" class="menu">Text3</a> 
</div>

css:

a.menu {
    display: block;
    box-sizing: border-box;
    padding: 15px;
    width: 70px;
    height: 60px;
    /* other styles */
}

Div 可在整个页面宽度上点击，即使页边距设置为小于距离

Div clickable through the whole width of the page even though the margin is set to less of the distance

html

css

margin