HTML: li and a href

Question

我已经为我的 ul li 添加了样式，它们出现在一个下拉框中，当你将鼠标悬停在每个 li 上时，它会变成紫色的 a:hover。现在，在每个 li 中都有一个名称，我想让它成为一个链接，这样当你点击标记的 li 的任何位置时，就会跳转到链接。

现在，当你在 li 中的某个地方点击时，什么也不会发生，只有当你点击 li 内的名称时才会有反应。

以下是我的代码：

  echo '<a href="profil.php?id='.$result->id.'"><li onClick="fill(\''.addslashes($result->full_name).'\');">'.$result->full_name.'</li></a>';

我该怎么做呢？

    .suggestionsBox {
    position: absolute;
    left: 0px;
    top: 10px;
    margin: 26px 0px 0px 0px;
    width: 200px;
    padding:0px;
    background-color: #000;
    border-top: 3px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList ul li {
    list-style:none;
    margin: 0px;
    padding: 6px;
    border-bottom:1px dotted #5a2156;
    cursor: pointer;
}
.suggestionList ul li:hover {
    background-color: #5a2156;
    color:#000;
}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    padding:0;
    margin:0;
}

- Karem

Answer 1

A 元素只能包含级别元素，LI 只允许在 OL 和 UL 中使用。但是 LI 允许内部包含 A，所以需要反过来处理：

echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

为使A元素占据所有可用空间，将其显示为块级元素：

li > a {
    display: block;
}

- Gumbo

---

这并不能解决问题；但无论如何，li 只能是 ol 或 ul 的子元素。 - Steve

在<li>标签内使用<a>是正确的。为了确保链接与其他列表元素显示相同，请考虑以下CSS：li > a { display: block; font-weight:inherit!important; font-family:inherit!important; color:inherit!important; text-decoration:inherit!important; } - ClubbedAce

Answer 2

也许有点晚了，但对于那些有同样问题的人：

我会（并且已经）像这样做：

.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 0px;
border-bottom:1px dotted #5a2156;
cursor: pointer;
}
.suggestionList ul li a {
display: block;
padding: 6px;
}

元素没有更多的填充，里面的标签与

元素一样大。

- SixKnight

Answer 3

我不确定你是否应该像那样在锚点<a>中放置一个<li>。如果您希望整行都可以点击，只需将<a>放在<li>内部即可，它应该会占据正确的宽度。如果不是，请给它设置高度和宽度，<li>应该会紧密地围绕它，使其全部可点击。

就像这样：

echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

然后是CSS：

a{height : 20px;}

<a> 是内联元素，因此无法设置其宽度，但它会紧密地包裹其文本。

- Alex B

Answer 4

首先，一个 li 元素必须是 ul 元素的直接子元素，因此您必须将 a 标签放在 li 标签内。

以下是我构建 HTML / CSS 的方式；请根据您认为最适合的方式将其整合到您的 PHP 中。

<ul>
  <li><a href="#"><span class="list1">Content 1</span></a></li>
</ul>

.list1 {width: 120px;} /* Set this to whatever width you want the list to fill*/

- Moses

Answer 5

这是我在项目中使用的代码，效果非常好。overflow属性可以防止a href标签超出li元素的范围，而设置100%的padding则填充了剩余空间。

#cbtn li
{
    height: 61px;
    border: none;
    outline: none;
    list-style: none;
    float: left;
    overflow: hidden;
}

#cbtn li a
{
    padding: 100%;
    outline: none;
}

它的工作示例：http://jsbin.com/ilocow/4/

- yanike