Question

我基本上有这个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代码。

Answer 1

鉴于您的新要求，可以通过另一种方式实现这一目标，而无需更改现有的HTML结构：

从absolute和.list-item-link移除.list-item-link-description定位，position: absolute;从文档流中取出元素，这两个需要知道每个元素的空间大小他们占用了
使用.list-item-link向.list-item-link:after添加伪元素，制作此position: absolute;并设置height和width以占用容器的尺寸。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

如果您的简短说明位于第1行，则可以将padding-bottom添加到list-item-link，然后将说明向上移动相同的金额，并为margin-bottom设置为负z-index阻止作为一个整体。如果你在ems中进行填充，它应该处理不同的字体大小。

要使简短描述可点击，您需要使链接的.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>

{{1}}

Answer 3

这可以通过对标记和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>

Answer 4

编辑：我按照您的要求删除了段落标签，但是如果没有跨度我无法以任何其他方式工作，因此跨度必须保持不变。

<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/

Answer 5

＆＃13;

css

a{
	text-decoration: none;
}
.anchor-control{
	text-decoration: underline;
}
.unordered-list {
	padding-left: 0;
	list-style: none;
}

.list-item {
	position: relative;
	padding; 0;
	margin: 0;
}

.list-item-link {
	position: relative;
}

#content {
	display: none;
}
#show:target #content {
	display: inline-block;
}
#show:target #open {
	display: none;
}
.btn-open:after,.btn-close:after{ 
	position:absolute; 
	right:280px;
	top:0;
}
.btn-open:after{
	content: "\25BC";    
}
.btn-close:after{
	content: "\25B2";     
}

＆＃13;

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

＆＃13;

试试 JSFIDDLE

将html链接的可单击区域扩展为包含其他内容的包装li元素的大小

5 个答案: