HTML: li 和 href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3701660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: li and a href
提问by Karem
So i have styled my ul li, it comes in a dropdown box and when you mark over each li it a:hover with purple. Now in each li there′s a name. I want to make it all a link, so when you click anywhere in the marked li you go to the link.
所以我已经设计了我的 ul li，它出现在一个下拉框中，当你在每个 li 上标记它时：用紫色悬停。现在每里都有一个名字。我想把它全部做成一个链接，所以当你点击标记的 li 中的任何地方时，你就会转到链接。
Right now, when you click somewhere in the li nothing happens, only if you click on the name IN the li..
现在，当您单击 li 中的某个位置时，没有任何反应，仅当您单击 li 中的名称时..
Here's my code:
这是我的代码：
echo '<a href="profil.php?id='.$result->id.'"><li onClick="fill(\''.addslashes($result->full_name).'\');">'.$result->full_name.'</li></a>';
How do i do this?
我该怎么做呢？
.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;
}
回答by Gumbo
The Aelement can only contain level elements and LIis only allowed in OLand UL. But LIallows Ainside, so make it the other way round:
该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>';
To make the Afill the available space, display it as block element:
要A填充可用空间，请将其显示为块元素：
li > a {
display: block;
}
回答by SixKnight
Maybe a bit late, but for those who have the same problem:
也许有点晚了，但对于那些有同样问题的人：
I would (and did) it like so:
我会（并且确实）这样做：
.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;
}
The li element has no more padding, and the a inside is as big as the li element.
li 元素没有更多的填充，a 里面和 li 元素一样大。
回答by yanike
This is what I'm using on my project and it works great. The overflow stops the a hreffrom expanding outside of the li and 100% padding fills the space.
这是我在我的项目中使用的，效果很好。溢出阻止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;
}
Example of it working: http://jsbin.com/ilocow/4/
它的工作示例：http: //jsbin.com/ilocow/4/
回答by Alex B
I'm not sure you should put an <li>inside an anchor <a>like that. If you want the whole line to be clickable just put the <a>inside of the <li>and it should take up the right width. if not, give it a set height and width and the <li>should fit tightly around it, making it all clickable.
我不确定你是否应该<li>在这样的锚里面放一个<a>。如果您希望整条线都可以点击，只需将其<a>放在里面，<li>它应该占据正确的宽度。如果没有，给它一个设置的高度和宽度，并且<li>应该紧紧地围绕它，使其全部可点击。
so like:
像这样：
echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';
and then the css:
然后是css：
a{height : 20px;}
<a>is inline so its width cannot be set but it will wrap tightly around it's text.
<a>是内联的，所以它的宽度不能设置，但它会紧紧地包裹在它的文本周围。
回答by Moses
First, a lielement must be a direct child of a ulelement, so you have to have the atag inside the litags.
首先，li元素必须是元素的直接子ul元素，因此必须在a标签内放置li标签。
Here is how I would construct the HTML / CSS; incorporate it into your php however you think it would work best.
这是我将如何构建 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*/
