Question

您好我有一个无序列表，其中我有一个部分，其中列表如此代码所示

<li id = "project"> My Projects </li>

id项目对应的地方

#project
{
    list-style-image:url(link.png);
    position:relative;
    left:20px;
    top:100px;
}

我想知道如何使这个link.png可点击。我找到了一个例子，你点击一个图片，它进入一个链接，但我有点困惑在这里做什么，因为这是在一个无序的列表（我不知道任何Javascript顺便说一句，最近刚开始重新学习html和CSS）

Answer 1

问题是为什么你只能点击一个LI子弹？想想更好地使用体验 e。更大的可点击区域=总幸福感。

将左边距设置为内部锚点，
设置相等的负左边距以覆盖自定义项目符号图像

＆＃13;

#menu li{
  position:relative;
}
#menu li a{
  display:block;
  background:rgba(255,0,0, 0.1);    /* demo: to make visible the clickable area */

  padding-left:45px;
  margin-left:-45px;
}

#li_videos  {list-style-image:url(//placehold.it/30x30/af8);}
#li_project {list-style-image:url(//placehold.it/30x30/f0f);}

＆＃13;

<ul id="menu">
  <li id="li_videos"><a href="index.html">Videos</a></li>
  <li id="li_project"><a href="projects.html">Projects</a></li>
</ul>

＆＃13;

如果您只想点击列表图标，可以执行以下操作：

<li>
    <a href="projects.html"></a> <!-- move me till I overlay the icon list image -->
    My Projects
</li>

比使用CSS为li a锚点提供一个大小并移动它直到它完全覆盖你的列表样式图像。

使与列表相关联的图片成为链接

1 个答案: