Div可點擊整個頁面寬度，即使邊距設置爲距離的更小

好的，所以我有一點奇怪的問題。Div可點擊整個頁面寬度，即使邊距設置爲距離的更小

我一直在爲一個學校項目的小網站工作，我需要一個側面的按鈕面板。因此，我製作了一些div，並將它們鏈接到我的其他頁面等。

但是後來出現了一個奇怪的問題。我可以點擊我的div的區域並不侷限於頁邊空白區域，而是出現在頁面水平軸的整個長度上，但不是垂直的。

我已經嘗試過尋找某種解決方案來解決這個問題，但似乎找不到任何解決方案。我也試圖改變我的div的邊緣，但似乎沒有任何工作。

這是我的DIV的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

來源

2015-10-20 ImSlake

你並不需要把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/

來源

2015-10-20 07:20:31

閱讀關於HTML內嵌和塊元素 - http://www.impressivewebs.com/difference-block-inline-css/

P.S.You不需要把DIV和P標籤爲一個，這會讓你的代碼難以閱讀和已瞭解。

使這一切simplier，與樣式：

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 */ 
}

來源

2015-10-20 07:22:11

Div可點擊整個頁面寬度，即使邊距設置爲距離的更小

回答

相關問題