使完整<；李>；作为链接与适当的HTML

我知道这已经上升了很多次，但我找不到任何解决方案，在我的具体情况

我有一个导航栏，我希望整个

“链接”或“可点击”。现在只有

HTML

asdf







有人有一个简洁的解决方案吗

提前谢谢你
 移动
答案，锚定标记必须包含内联元素，而且您的
看起来是内联的，所以这应该是有效的。
先生，您使用jquery吗？
如果是，您可以尝试：

$("li").click(function(){
   $(this).find('a').click();
});

或者您也可以将其用作css：

li{
  position:relative;
}
li a {
  position:absolute;top:0px;left:0px;width:100%;height:100%;
}

选择一个。。。
祝你好运
直接格式化
a
，而不是用你的风格格式化
li

我把你的小提琴改了
摆脱
s
设置
我想你的意思可能是
内联块
，而不是
内联块
：

li a {display: inline-block; height: 100%; width: 100%; }

另外，
内联块
在旧版IE浏览器中也有自己的问题，可能不会像你期望的那样做出反应。
你应该让
a
元素
显示：块
或
显示：内联块
我自己也有这个问题

答案再简单不过了：

<li class="menuitem"><a href="index.php"><div class="menulink">Lnk1</div></a></li>
Wrong:
.menuitem {
    list-style-type:        none;
    display:                 inline;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}

Correct
.menuitem a {
    list-style-type:        none;
    display:                 block;
    margin-left:            5px;
    margin-right:            5px;
    font-family:            Georgia;
    font-size:                11px;
    background-color:        #c0dbf1;
    border:                 1px solid black;
    padding:                10px 20px 10px 20px;
}


错：
梅努特姆先生{
列表样式类型：无；
显示：内联；
左边距：5px；
右边距：5px；
字体系列：格鲁吉亚；
字体大小：11px；
背景色：#c0dbf1；
边框：1px纯黑；
填充：10px 20px 10px 20px；
}
对的
梅努特姆先生{
列表样式类型：无；
显示：块；
左边距：5px；
右边距：5px；
字体系列：格鲁吉亚；
字体大小：11px；
背景色：#c0dbf1；
边框：1px纯黑；
填充：10px 20px 10px 20px；
}

换句话说，您希望将LI的css应用于A元素。确保A是块线元素
我要做的是：

a { display: block; }

然后按照我认为合适的方式设计锚固件

这里是小提琴：
只需使用“显示块”作为链接

ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}

下面是一个例子：）
如果你想
具有可点击性，那么你需要使用Javascript，可以吗？不幸的是，
处于除
之外的任何位置都是无效的。不允许使用
ul li{}
元素。元素的内联或块性质在HTML规范中定义，不受CSS显示属性的更改。显示：内联只是使某些内容看起来是内联的，实际上并不是内联的。事实上，它更像是一个
不能包含除
之外的任何内容。这不是很好的解决此问题的方法。jQuery是一种过火的行为（尤其是在没有提到JavaScript的情况下）。和
position:absolute
将导致
li
失去高度和宽度。+1用于在答案中包含代码示例，并使用OP提供的实际CSS。这不会解决整个问题。如果填充应用于
li
（它是），那么
a
（它将占据填充之前的所有水平空间。当然，填充应该是内部链接：）在我的JSFIDLE示例中它是内部链接。我认为这是显而易见的。因为看起来可点击与实际可点击并不相同。更糟糕的是，是的。我现在可能睡得太少了。：-）完美的这正是我想要达到的！非常感谢你，史蒂夫！尝试获取链接以应用于Sharepoint网站上的整个幻灯片可以节省我几个小时。只需增加身高：100%。
ul {
  display: block;
  list-style-type: none;
}

li {
  display: inline-block; /* or block with float left */
  /* margin HERE! */
}

li a {
  display: block;
  /* padding and border HERE! */
}