Html 使用 <a> 元素在没有 javascript 的情况下使整个 <li> 可点击

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14803009/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:30:44  来源:igfitidea点击:

Make entire <li> clickable with <a> element inside without javascript

htmlcss

提问by Buttle Butkus

Is there any way?

有什么办法吗?

I have a <ul>with some <li>elements inside. It's part of a dropdown menu. Each <li>becomes a box the size of the largest <li>element in the group (the one with the most text inside it).

我有一个里面<ul>有一些<li>元素。它是下拉菜单的一部分。每个都<li>变成一个<li>与组中最大元素(其中包含最多文本的元素)大小的框。

The problem is I want people to be able to click anywhere inside each <li>box and have the link work, instead of just where the text is. I would like a non javascript solution if possible.

问题是我希望人们能够点击每个<li>框内的任何地方并让链接工作,而不仅仅是文本所在的位置。如果可能,我想要一个非 javascript 解决方案。

Here's some sample HTML. The inner <li>elements are the ones with the links.

这是一些示例 HTML。内部<li>元素是带有链接的元素。

<li class="parent Glass" style=" float: left;">

Glass
    <ul class="child" style="float: left; position: absolute; z-index: 999; display: none;">
    <li style=" float: left;">
                <a href="http://example.com/path/to/somehwere.html?glass=25">Brown       (13)</a>

    </li>
    <li style=" float: left;">
                <a href="http://example.com/path/to/somehwere.html?glass=112">Crystal       (93)</a>

    </li>
    <li style=" float: left;">
                <a href="http://example.com/path/to/somehwere.html?glass=99">Gray       (1)</a>

    </li>
    <li style=" float: left;">
                <a href="http://example.com/path/to/somehwere.html?glass=42">Latte       (12)</a>

    </li>
    <li style=" float: left;">
                <a href="http://example.com/path/to/somehwere.html?glass=72">White       (15)</a>

    </li>
    </ul>

</li>

回答by mpen

You need to add display:blockto your <a>tags, then you can set a width and height or padding [on the <a>], if you want to make the clickable region bigger.

您需要添加display:block到您的<a>标签中,然后您可以设置宽度和高度或内边距 [在<a>] 上,如果您想让可点击区域更大。