Question

我希望将整个div链接到microsoft.com。如何添加整个div wrapper-promo的链接？我想要用户点击的地方，他们会转到链接。

这是我的jsfiddle： http://jsfiddle.net/huskydawgs/eL7rwLx3/45/

这是我的HTML：

<div class="wrapper-promo">
    <div class="title-top">
        <h2 class="block-title">
            Three states or less</h2>
    </div>
    <div class="promo-content">
        <p>Bid and RFP Notification Only</p>
    <p>Online and email support</p>
        <p><a href="http://www.microsoft.com"><img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" /></a></p>
    </div>

这是我的CSS：

    .wrapper-promo {
    background-color: #e2e3e4;
    margin: 10px 0;
    width: 100%;
}

.title-top {
    background-color: #2251a4;
    height: 40px;  
    line-height: 40px;
}


.title-top-cell {
    display: table-cell;
    vertical-align: middle;
}


.promo-content {
    margin: 20px;
    padding: 0 0 10px 0;
}

h2 {
    font-family:Arial,sans-serif;
    font-size:19px;
    font-weight: bold;
    color:#fff;
    margin: 10px 0 -10px 0;
    text-transform:none;
}

    h2.block-title {
        font-size:22px;
        margin: 0;
        text-align: center;
        text-transform:none;
    }

    .promo-content p {
    font-family: Arial,sans-serif;
    font-size: 14px;
    color: #232323;
    line-height: 20px;
    text-align: center;
 }

Answer 1

我建议添加一个空的锚元素作为.wrapper-promo元素的直接子元素。然后你可以绝对将它 relative 定位到父元素，这样它就会占用父元素的任何尺寸。

这样做，整个元素都是可点击的，您不必担心将a元素包裹在任何div或块级元素周围：

Updated Example

.wrapper-promo {
  position: relative;
}
.wrapper-promo > a {
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
}

<div class="wrapper-promo">
  <div class="title-top"><!-- ... --></div>
  <div class="promo-content"><!-- ... --></div>
  <a href="http://www.microsoft.com"></a>
</div>

Answer 2

而不是div，只需将a与display:block;一起使用。

它将在您的流程中作为块元素运行，您可以设置href等。

您可能需要覆盖其color，text-decoration和:visited CSS。

此处的替代方法是使用带有Javascript的click事件 - blech。

代码请求编辑：

您需要做的就是更改.wrapper-promo的风格：

.wrapper-promo {
    background-color: #e2e3e4;
    display:block;
    margin: 10px 0;
    text-decoration: none;
    width: 100%;
}

然后将其更改为a：

<a class="wrapper-promo" href='http://www.google.com/'>
...
</a>

Answer 3

使用HTML5，即使a标签是内联元素，也允许在标签内包装块元素。这是一个小提琴，您的原始链接用作所有其他元素的容器。 http://jsfiddle.net/Nillervision/761tubkc/

<a class="blockLink" href="http://www.microsoft.com">
  <div class="wrapper-promo">
    <div class="title-top">
      <h2 class="block-title">
        Three states or less
      </h2>
    </div>
    <div class="promo-content">
      <p>Bid and RFP Notification Only</p>
      <p>Online and email support</p>
      <p>
        <img height="31" src="http://www.onvia.com/sites/default/files/button_get_started_orange.png" width="112" />
      </p>
    </div>
  </div>
</a>

使用HTML将href添加到整个div

3 个答案: