我必须将整个div与其中的其他元素一起点击。
我这样做是在<a href="#"> </a>
内写下潜水:
<a href="#">
<div class="detail padding-lg full-width like-on-post">
<div class="avtar round pull-left">
<span class="user-personal-pic default-user-avtar border circle avtar user-image you-menu ">
<g:if test="${usrHeader?.avatarUrl?.indexOf('no-avatar') ==-1 || usrHeader?.avatarUrl?.length() == 0 || usrHeader?.avatarUrl == null}">
<img src="${usrHeader?.avatarUrl}" width="34" height="34" alt="Avatar" />
</g:if>
</span>
</div>
<div class="detail-container">
<p class="name">${usrHeader?.fullName()}</p>
<p class="footer mouse-over"><g:link controller="connection" action="details">View profile</g:link></p>
</div>
</div>
</a>
出于某种原因,将整个div放到<a href="#"> </a>
,它会将每个元素放到不同的<a href="#"> </a>
。
我怎样才能将所有div都归结为<a href="#"> </a>
?
答案 0 :(得分:1)
默认情况下会显示<a>
标记inline
,任何内联元素都不会受到padding
的影响,因此如果您想创建一个可在其中随处可点击的按钮,请创建一个空的div
将<a>
放入其中,并将其display:block;
或display:inline-block;
添加,然后您可以为其添加填充以消耗它,或使用宽度,取决于您需要的这是一个小Example
<div class="btn"><a href="#">Button</a></div>
a{
display:inline-block;
padding:20px;
text-decoration:none;
color:white;
background:#262626;
font-family:Arial;
transition:all 0.5s;
}
a:hover{
background:#000;
}
答案 1 :(得分:0)
您是否曾尝试在css上的display:block
标记上添加a
。请试试这个希望它会起作用
答案 2 :(得分:0)
下面是一个示例,在div中有一个标记,并且可以显示:块和宽度和高度100%所以整个div现在都可以点击。
整个div是可点击的
div{
background:green;
height:100px;
border:1px solid blue;
}
a{
background:yellow;
display:block;
width:100%;
height:100%;
}
<div>
<a href="http://google.co.in">google</a>
</div>
答案 3 :(得分:0)
要使div可点击,请执行
<div onclick="/*Your JavaScript Code*/" style="cursor:pointer;">
这应该适用于大多数用途。
答案 4 :(得分:0)
请尝试以下操作: Demo
CSS:
a {
display:block;
background-color:yellow;
text-decoration:none;
}
a span {
display:block;
background-color:red;
color:#fff;
}
设置<a>
<a href="http://google.com" target="_blank">...</a>
答案 5 :(得分:0)
使父div相对定位,并在其中放置一个锚标记,其位置为:absolute,设置top:0,right:0,bottom:0,left:0。