代码之家  ›  专栏  ›  技术社区  ›  user1724434

如何使div可链接?

  •  0
  • user1724434  · 技术社区  · 9 年前

    我在Shopify主题的主页上有一个块,基本上是一个图像框,上面有文本,当文本被点击时,它链接到一个url。

    我希望框本身是可链接的,以防我不使用任何文本。这是下面的代码,使文本成为链接。如何使整个框成为链接?

      `<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <div class="img1">
            <a href="{{ settings.home_blockhtml_link_1 }}">             
              {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}                               
              <div class="description">
                <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
                <p class="text">{{ settings.home_blockhtml_des_1 }}</p>         
                <p class="button hidden-md hidden-sm hidden-xs"><a class="btn btn-outline-small" href="{{ settings.home_blockhtml_link_1 }}" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</a></p>
              </div>    
            </a>        
        </div>  
    </div>
    

    `

    2 回复  |  直到 9 年前
        1
  •  1
  •   stuartmccoll    9 年前

    div 在您的 <a> 标签,像这样,给出 a 标记他们自己的班级。这需要CSS样式如下:

    .className {
        display:block;
    {
    

    现在 <a> 标签内的 <div> 将导致问题,因此您需要将此更改为元素,下面的示例将其更改为 <span> .

    <a href="{{ settings.home_blockhtml_link_1 }}" class="className">
    <div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="img1">
    
    
          {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}
    
          <div class="description">
            <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>
            <p class="text">{{ settings.home_blockhtml_des_1 }}</p>
    
            <p class="button hidden-md hidden-sm hidden-xs"><span class="btn btn-outline-small" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</span></p>
          </div>
    
        </div>
    
    </div>
    
    </a>
    

    请参见: https://jsfiddle.net/88fx4p3x/

        2
  •  0
  •   Anne Douwe    9 年前

    只要拿到 <a> 标记在div标记的前面和后面。这将使div成为超链接