Question

我有这个HTML和CSS列表结构：

.mylist-group{
	 padding-left: 0;
     margin-bottom: 20px;
      list-style:none;
	}
.mylist-group-item{
	
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
  height:134px;
	}

.mylist-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

	
.mylist-group-item  img{
float:right;
margin :5px 5px 5px 10px;
}

.mylist-group-item a{
float:right;
margin :50px 40px 0 0;
text-decoration: none;
 color: #555555;
 display:block;
}

<ul class="mylist-group">
	 <li class="mylist-group-item">
		 <img src="images/f6.jpg" class="img-rounded">
			<a href="#"> گالری کیک</a>
		 </li>
	 <li class="mylist-group-item">
		<img src="images/f6.jpg" class="img-rounded">
		  <a href="#"> گالری کیک</a>
	 </li>
	  <li class="mylist-group-item">
		  <img src="images/f6.jpg" class="img-rounded">
		   <a href="#"> گالری کیک</a>
	 </li>
</ul>

问题是，如果我将光标移动到<li>中，则链接仍未激活，我必须将光标移动到确切的链接上。

如果我将光标移到li标签上，我想实现一个有效的链接，我该怎么做？

Answer 1

一个选项是用具有所需高度/填充/等的a元素包装每个列表项的内容。

但是如果不改变标记，仍然可以（某种方式）扩展可点击区域。

我们可以display将a个元素block作为overflow: hidden并向其提供padding，以便不与浮点重叠。

然后为他们添加适当的line-height / .mylist-group{ padding-left: 0; margin-bottom: 20px; list-style:none; } .mylist-group-item { position: relative; padding: 10px 15px; margin-bottom: -1px; background-color: #fff; border: 1px solid #ddd; height:134px; } .mylist-group-item:first-child { border-top-left-radius: 4px; border-top-right-radius: 4px; } .list-group-item:last-child { margin-bottom: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } .mylist-group-item img{ float:right; margin :5px 5px 5px 10px; } .mylist-group-item a{ overflow: hidden; text-decoration: none; color: #555555; display: block; line-height: 16px; padding: 59px 0; text-align: right; }（用于垂直对齐）以实现目标，如下所示：

<ul class="mylist-group">
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
</ul>

{{1}}

Answer 2

像

这样的东西

<a href="#"><img src="images/f6.jpg" class="img-rounded"> گالری کیک</a>

<强>更新此

<a href="#">
    <li class="mylist-group-item">
         <img src="images/f6.jpg" class="img-rounded"> 
         گالری کیک
    </li>
</a>

正如Hashem在评论中指出的那样，

并不是最好的主意。

Answer 3

你可以将整个li包装成这样的href并更改＆＃34; a＆＃34;对于＆＃34; span＆＃34;

    <a href="#">
        <li class="mylist-group-item">
            <img src="images/f6.jpg" class="img-rounded" />
            <span> گالری کیک</span>
        </li>
    </a>

您需要更改自己的CSS而不是

.mylist-group-item a {
    ...
}

你需要

.mylist-group-item span {
    ...
}

如何使用<a> and <img/> tags</a> </li>制作悬停活跃的整个<li>

3 个答案: