Question

所以我设计了我的ul 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;
}

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

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

li元素没有更多填充，a里面和li元素一样大。

Answer 3

我不确定你应该将<li>置于锚<a>内。如果您希望整行可以点击，只需将<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>是内联的，因此无法设置其宽度，但它会紧紧围绕它的文本。

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

Answer 5

这是我在我的项目中使用的，它的效果很好。溢出会阻止 a href 扩展到li之外，并且100％填充填充空间。

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

HTML：li和一个href

5 个答案: