如何使用css使整个div可单击

Question

我试图让整个div成为可点击的链接，而不仅仅是文本。我尝试了各种方法，如概述here，但所有这些方法都会使形状消失。

到目前为止，我有这个：

http://jsfiddle.net/n5xow3cd/2/

#productfooter {
width:100%;
max-width:500px;
height: 100px;
    margin:0 auto;
 }

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
    padding:0 7px;
}


#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;

}

#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
}

#stern a:hover {
    color:#fff;
}

我可以更改什么才能使整个#stern可点击而不仅仅是文字？

感谢您的帮助！

Answer 1

只需修改您的HTML结构，并将div放在a元素中。

<div id="productfooter">
    <a href="#">
        <div id="stern">
             <p class="sterntext">title title title title title title</p>
        </div>
    </a>
</div>

http://jsfiddle.net/n5xow3cd/3/

Answer 2

无法编辑HTML

/* For functional purposes */

div {
    width: 100px;
    height: 100px;
}

a {
    display: block;
    width: 100%;
    height: 100%;
}


/* For design purposes */

div {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}

a {
    color: inherit;
    text-decoration: inherit;
}

<div><a href="#">text here</a></div>

我们只需将a设置为block，然后让他充分width并填满height。

可以编辑HTML

/* For functional purposes */

a {
    display: block;
    width: 100px;
    height: 100px;
}


/* For design purposes */

a {
    background: #2c3e50;
    color: white;
    text-decoration: none;
}

<a href="#">text here</a>

我们将a设置为阻止。

Answer 3

您可以将.sterntext显示为table-row，将#stern a显示为table-cell。

＆＃13;

＆＃13;

#productfooter {
    width:100%;
    max-width:500px;
    height: 100px;
    margin:0 auto;
}
#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732') no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}
.sterntext {
    z-index: 999;
    position: relative;
    height: 75px;
    vertical-align: middle;
    display: table-row;
}
#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638') no-repeat center;
    color:#fff;
    background-size:100%;
}
#stern a {
    color:#000;
    font-family:arial;
    font-size:12pt;
    display: table-cell;
    vertical-align: middle;
    padding: 0 7px;
}
#stern a:hover {
    color:#fff;
}

＆＃13;

<div id="productfooter">
    <div id="stern">
        <p class="sterntext"><a href="#">title title title title title title</a>
        </p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;