从锚定HTML/CSS中排除复选框_Html_Css

从锚定HTML/CSS中排除复选框

html css

从锚定HTML/CSS中排除复选框,html,css,Html,Css,在我的web应用程序中，我需要一个html链接列表，每个链接前面都有一个复选框。我需要创建列表，以便用户可以单击上的任何位置，而不仅仅是文本上的任何位置来访问链接。但是我需要将复选框从链接中排除，并单独选中/取消选中，以便单击复选框不会使链接单击出于我的目的，我创建了如下标记： <a href='projecthome.php?pid=1'> <li> <input type='checkbox' name='chkproject' value='project

在我的web应用程序中，我需要一个html链接列表，每个链接前面都有一个复选框。我需要创建列表，以便用户可以单击

上的任何位置，而不仅仅是文本上的任何位置来访问链接。但是我需要将复选框从链接中排除，并单独选中/取消选中，以便单击复选框不会使链接单击

出于我的目的，我创建了如下标记：

<a href='projecthome.php?pid=1'>
<li>
<input type='checkbox' name='chkproject' value='project'/>&nbsp;&nbsp;&nbsp;&nbsp;Example
</li>
</a>

这在Chrome中非常有效，我可以在不触发链接点击的情况下选中/取消选中复选框。但在firefox中，当我点击复选框时，链接点击触发，浏览器指向链接。我怎样才能防止这种情况？除了我的html标记之外，还有其他方法可以防止这种情况吗

谢谢。

li元素可能只是

ul

或

ol

元素的子元素，而不是

元素

我不知道您当前的标记想要实现什么，但我建议您改为使用：

<a href='projecthome.php?pid=1'>...</a>
<label>
    <input type='checkbox' name='chkproject' value='project'/>
    Example
</label>

我同意James的观点，但如果您未能通过使用该物业实现以下目标：

pointer-events: none;


测试
li{宽度：100%；边距底部：5px；浮动：左；}
div{宽度：100%；}
LIA{宽度：98%；填充：10px 0px 10px 30px；浮点：左；位置：相对；}

谢谢你的建议@James。我删除并添加了css，不用担心。可能值得注意的是，您接受的答案在IE8、9或10中不起作用。谢谢你提供的信息@James。我不需要为IE9添加上述代码。默认情况下，它和chrome一样工作，但在IE8、IE9或IE10中不起作用，IE8、IE9或IE10总共占互联网用户的35%左右。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>testing</title>
</head>
<style>
li{width:100%; margin-bottom:5px;float:left;}
div{width:100%;}
li a{width:98%;padding:10px 0px 10px 30px; float:left; position:relative;}
</style>
<body>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 2</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 3</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
<li>
<div style="background-color:#CCCCCC; float:left; position:relative;">
<a href="projecthome.php?pid=1" target="_blank">This is your link 4</a>
<input type='checkbox' name='chkproject' value='project' style="position:relative; clear:both;z-index:10; margin-left:10px; float:left; margin-top:-25px;"/>
</div>
</li>
</body>
</html>