展开一个HTML链接的点击区域为包含其他内容

包装li元素的大小，我基本上是这样的html代码：展开一个HTML链接的点击区域为包含其他内容

<ul class="unordered-list"> 
    <li class="list-item"> 
    <div class="list-item-block"> 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
     <p class="list-item-link-description">Short description of the link above</p> 
    </div> 
    </li> 
</ul>

有没有办法扩大链接的点击区域通过保持链接位置和描述恰好在链接之下来保存li元素的大小？

我试图对链接和描述都使用绝对定位，但如果例如链接文本有换行符，则失败。正如你可以看到在这个jsFiddle：http://jsfiddle.net/xgcjngvs/3/

我很想找到一个解决方案，这个问题没有javascript。

编辑：我应该提到，链接标记应该只包含纯文本，而不是任何其他的HTML代码。

来源

2014-09-24 Thomas

鉴于你的新要求还有另一种方法，这可以在不改变现有的HTML结构来实现：

从.list-item-link和.list-item-link-description取出absolute定位，position: absolute;采用这些元件，文档流的这两个需要注意的多少空间每个人占用
伪元素添加到.list-item-link使用.list-item-link:after，使此position: absolute;并设置height和width占用容器的尺寸。

.unordered-list { 
 
    list-style: none; 
 
    padding-left: 0; 
 
} 
 
.list-item { 
 
    min-height: 50px; 
 
    position: relative; 
 
} 
 
.list-item-link { 
 
    width: 100%; 
 
} 
 
.list-item-link:after { 
 
    content: ""; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 
.list-item-link-description { 
 
    margin: 0; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
     <div class="list-item-block"> 
 
      <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
 
      <p class="list-item-link-description">Short description of the link above</p> 
 
     </div> 
 
    </li> 
 
    <li class="list-item"> 
 
     <div class="list-item-block"> 
 
      <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</a> 
 
      <p class="list-item-link-description">Short description of the link above</p> 
 
     </div> 
 
    </li> 
 
</ul>

JS小提琴：http://jsfiddle.net/5s44c95q/

来源

2014-09-24 18:07:15

这就是我试图去的地方。现在，描述或链接的大小并不重要。比我的回答更好。 – Rhumborl 2014-09-25 07:58:48

是的，这真的是一个很好的解决方案！你甚至可以垂直居中链接，只要你将'list-item'保持为最接近'position：relative'元素。谢谢！ – Thomas 2014-09-25 08:22:09

如果您的简短说明将在1行上，您可以将padding-bottom添加到list-item-link，然后将说明向上移动相同的数量，并且为整个块设置否定的margin-bottom。如果你在ems中进行填充，它应该处理不同的字体大小。

要使简短描述可点击，您需要使链接的z-index高于描述。

.unordered-list { 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 

 
.list-item { 
 
    margin-top:10px; 
 
    margin-bottom:-2em; 
 
    position:relative; 
 
} 
 

 
.list-item-link { 
 
    display:block; 
 
    position:relative; 
 
    border:1px #000 solid; /*to show link area */ 
 
    padding-bottom:2em; 
 
    z-index:1; 
 
} 
 

 
.list-item-link-description { 
 
    position:relative; 
 
    top:-2em; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
    <div class="list-item-block"> 
 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a> 
 
     <p class="list-item-link-description">Short description of the link above</p> 
 
    </div> 
 
    </li> 
 
    <li class="list-item"> 
 
    <div class="list-item-block"> 
 
     <a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</a> 
 
     <p class="list-item-link-description">Short description of the link above 2</p> 
 
    </div> 
 
    </li> 
 
</ul>

来源

2014-09-24 13:33:29 Rhumborl

这几乎可以解决，但我需要的简短描述点击，而不包括其在'列表项，link' 。那可能吗？ – Thomas 2014-09-24 14:18:50

好的，我设法使用'z-index'工作。它不工作与多行简短描述tho – Rhumborl 2014-09-24 14:39:52

这是可能有一些变化，以您的标记和CSS：

变化list-item-block到a元素，并将其设置为display: block;
变化list-item-link和list-item-link-description换成span元素为只有inline个元素a元素为有效
风格list-item-link看起来像链接
风格list-item-link-description看起来像一款

.unordered-list { 
 
    padding-left: 0; 
 
    list-style: none; 
 
} 
 

 
.list-item { 
 
    position: relative; 
 
    height: 50px; 
 
} 
 

 
.list-item-block { 
 
    display: block; 
 
    min-height: 100%; 
 
    text-decoration: none; 
 
} 
 
.list-item-link {  
 
    text-decoration: underline; 
 
} 
 

 
.list-item-link-description { 
 
    color: #000000; 
 
    display: block; 
 
    text-decoration: none; 
 
}

<ul class="unordered-list"> 
 
    <li class="list-item"> 
 
     <a href="www.google.com" class="list-item-block"> 
 
      <span class="list-item-link">Sometimes a wrapped link to Google</span> 
 
      <span class="list-item-link-description">Short description of the link above</span> 
 
     </a> 
 
    </li> 
 
    <li class="list-item"> 
 
     <a href="www.google.com" class="list-item-block"> 
 
      <span class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break.</span> 
 
      <span class="list-item-link-description">Short description of the link above</span> 
 
     </a> 
 
    </li> 
 
</ul>

来源

2014-09-24 13:34:00

编辑：我删除的段落标记为你已经提出要求，但是如果没有跨度，我无法以任何其他方式工作，所以跨度将不得不保持原位。

<ul class="unordered-list"> 
    <li class="list-item"> 
     <div class="list-item-block"> 
      <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</span> 
      Short description of the link above 
      </a> 
     </div> 
    </li> 
    <li class="list-item"> 
     <div class="list-item-block"> 
      <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google. It is very very very very very very long to demonstrate the linke break This needs to be a longer link then .</span> 
      Short description of the link above 
      </a> 
     </div> 
    </li> 
</ul>

这里是你的CSS。编辑：新的风格相匹配的顶部，这是很简单的东西

a{ 
    text-decoration: none; 
    color: #000; 
} 
.anchor-control a{ 
    text-decoration: underline; 
    width: 100%; 
    float: left; 
    color: #00f; 
} 

.unordered-list { 
    padding-left: 0; 
    list-style: none; 
} 

.list-item { 
    position: relative; 
    padding; 0; 
    margin: 0; 
} 

.list-item-link { 
    position: relative; 
} 

a .list-item-link-description { 
    position: relative; 
    color: #000; 
    margin: 0; 
    margin-bottom: 10px; 
}

编辑：这应该是你追求的。

http://jsfiddle.net/xgcjngvs/9/

来源

2014-09-24 13:38:04

不幸的是，遭受同样的问题 – Rhumborl 2014-09-24 13:39:52

对不起，我的屏幕是相当大的，所以我不得不扩大链接大小一次 – 2014-09-24 13:42:12

是的，你是正确的，但在你的小提琴中，第二个简短描述仍然与链接重叠。问题是保持简短的描述位于文本 – Rhumborl 2014-09-24 13:47:30

css 
 

 
a{ 
 
\t text-decoration: none; 
 
} 
 
.anchor-control{ 
 
\t text-decoration: underline; 
 
} 
 
.unordered-list { 
 
\t padding-left: 0; 
 
\t list-style: none; 
 
} 
 

 
.list-item { 
 
\t position: relative; 
 
\t padding; 0; 
 
\t margin: 0; 
 
} 
 

 
.list-item-link { 
 
\t position: relative; 
 
} 
 

 
#content { 
 
\t display: none; 
 
} 
 
#show:target #content { 
 
\t display: inline-block; 
 
} 
 
#show:target #open { 
 
\t display: none; 
 
} 
 
.btn-open:after,.btn-close:after{ 
 
\t position:absolute; 
 
\t right:280px; 
 
\t top:0; 
 
} 
 
.btn-open:after{ 
 
\t content: "\25BC";  
 
} 
 
.btn-close:after{ 
 
\t content: "\25B2";  
 
}

<ul class="unordered-list"> 
 
\t <li class="list-item"> 
 
\t <span class='anchor-control'><a href="www.google.com" class="list-item-link">Sometimes a wrapped link to Google</a></span> \t 
 
\t <div id="show"> 
 
\t \t <a href="#show" id="open" class="btn-open"></a> 
 
\t \t <div id="content"> 
 
\t \t \t Short description of the link above 
 
\t \t <a href="#hide" id="close" class="btn-close"></a> 
 
\t \t </div> 
 
\t </div> 
 
\t </li> 
 
</ul>

试试这个JSFIDDLE

来源

2014-09-24 15:08:54

展开一个HTML链接的点击区域为包含其他内容

回答

相关问题