如何讓我的div的邊距不可點擊？

因此，我目前正在學習如何使用html和CSS，並且我決定用一個非常小的項目來測試自己。當我結束時，我遇到了一個我不知道如何解決的小問題。
這裏是我的html
（注：我使用jsfiddle.net所以像DOCTYPE HTML和頭部不關心）如何讓我的div的邊距不可點擊？

div { 
 
    width: 300px; 
 
    background-color: rgb(255, 145, 145); 
 
    border: 1px solid black; 
 
    border-radius: 20px; 
 
    font-size: 1.5em; 
 
    margin: auto; 
 
    padding: 2px 
 
} 
 
div:hover { 
 
    background-color: rgb(255, 100, 100) 
 
} 
 
div:active { 
 
    background-color: rgb(255, 75, 75); 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: rgb(145, 230, 255); 
 
    font-family: serif, cursive; 
 
    font-weight: bold; 
 
} 
 
span { 
 
    color: red; 
 
    font-family: Comic Sans MS; 
 
}

<a href="#" target="_blank"> 
 
    <div> 
 
    <p> 
 
     When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this. 
 
    </p> 
 
    </div> 
 
</a>

的問題是，保證金我的divs是可點擊的，這正是我不想要的。請記住我是初學者，所以請儘可能簡單地解釋爲什麼會發生這種情況。

來源

2016-11-19 AstroSloth

爲什麼不包括的jsfiddle呢？ –

你是正面點擊保證金，還是你點擊填充？ –

快速修復：將鏈接放在div中。 – sinisake

-1

所以它得到它的大小是子元素你可以指定一個display: inline-block;或float: left;屬性容器鏈接：

a { 
    float: left; 
}

div { 
 
    width: 300px; 
 
    background-color: rgb(255, 145, 145); 
 
    border: 1px solid black; 
 
    border-radius: 20px; 
 
    font-size: 1.5em; 
 
    margin: auto; 
 
    padding: 2px 
 
} 
 
div:hover { 
 
    background-color: rgb(255, 100, 100) 
 
} 
 
div:active { 
 
    background-color: rgb(255, 75, 75); 
 
} 
 
a { 
 
    margin:100px; 
 
    float:left; 
 
    text-decoration: none; 
 
    color: rgb(145, 230, 255); 
 
    font-family: serif, cursive; 
 
    font-weight: bold; 
 
} 
 
span { 
 
    color: red; 
 
    font-family: Comic Sans MS; 
 
}

<a href="https://www.codecademy.com/learn/web" target="_blank"> 
 
    <div> 
 
    <p> 
 
     When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this. 
 
    </p> 
 
    </div> 
 
</a>

來源

2016-11-19 23:29:16 Alvaro

而不是將保證金和寬度上你的div，把它放在你的一個元素上，並將其設置爲阻止。

a {margin: 0px auto; width: 300px; display: block;}

來源

2016-11-19 23:41:09 SEFL

你應該風格的<a>代替<div>並把它成一個block。

a { 
 
    display:block; 
 
    width: 300px; 
 
    background-color: rgb(255, 145, 145); 
 
    border: 1px solid black; 
 
    border-radius: 20px; 
 
    font-size: 1.5em; 
 
    margin: auto; 
 
    padding: 2px 
 
} 
 
a:hover { 
 
    background-color: rgb(255, 100, 100) 
 
} 
 
div:active { 
 
    background-color: rgb(255, 75, 75); 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: rgb(145, 230, 255); 
 
    font-family: serif, cursive; 
 
    font-weight: bold; 
 
} 
 
span { 
 
    color: red; 
 
    font-family: Comic Sans MS; 
 
}

<a href="#" target="_blank"> 
 
    <div> 
 
    <p> 
 
     When you click on it, this button will take you to<span>Codecademy</span>, where I learned how to make things like this. 
 
    </p> 
 
    </div> 
 
</a>

來源

2016-11-19 23:42:34

偉大的思想認爲....同樣。 ;）Upvoted，因爲我懷疑你在輸入我的密碼時輸入了你的密碼。您可以將邊框半徑，顏色等元素設置爲任何元素。因此，您的答案和我的答案都可以工作。 – SEFL

如何讓我的div的邊距不可點擊？

回答

相關問題