html - 如何将填充计数作为标签的一部分（html/css）

Question

当我点击文本时，新链接会按预期打开，但是有没有办法让我点击同样设置为灰色背景颜色的填充和橙色翻转也会打开链接？

http://postimg.org/image/4olp43nar/fb37a8ac/

javascript在下面

sophiaList += "<li class='sophia_list_itemb' ><a class='sophia_book_link' 
href='" + neighborUrl + params + "' onclick='window.open(this.href); return false;' >" + image_title
        + "</a></li>";

css

.sophia-books-listView li {
display: block !important;
/*height: 175px !important;*/
position: relative !important;
margin-bottom: 35px !important;
text-align:left !important;
font-family: verdana !important;
font-style: bold;
font-size: 13px;
background-color: #EBEBEB !important;
padding: 8px !important;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: -4px 3px 4px rgba(0, 0, 12, 0.72);
margin-left: 2px;
padding-left: 5px;
width: 80%;}

请参阅链接的图像。谢谢。

Answer 1

border-box 您可以使用box-sizing属性将填充计数作为元素总宽度和高度的一部分，如下所示：

.element {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

有些人建议在通用级别上使用box-sizing，我在这方面取得了很好的效果：

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

链接标签又名。ancor标签是INLINE标签。与其中的文本长度相同。

因此，您需要将链接转换为 BLOCK 元素。

display: block;
width: xxxxpx;
height: xxxxpx;

您可以根据需要修改上面的 CSS。

Answer 3

这实际上是默认值。填充被认为是锚标记的一部分，因此是可点击的。

小提琴

<a href="#">Clicking on the padded area also works</a>

a
{
    padding: 20px;
    background: orange;
}