将整个< li>可点击与< a>元素里面没有javascript [英] Make entire <li> clickable with <a> element inside without javascript

问题描述

有什么办法吗？

我有一个< ul> >< li> 元素。它是下拉菜单的一部分。每个< li> 变成了组中的最大< li> 元素的大小

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).

问题是，我希望人们能够点击每个< li> 框和链接工作，而不只是文本的位置。如果可能，我想要一个非JavaScript解决方案。

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.

这里有一些HTML示例。 < li> 元素是具有链接的元素。

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

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

推荐答案

您需要添加 ：block 到您的< a> 标记，那么您可以设置宽度和高度或填充， 。

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

这篇关于将整个&lt; li&gt;可点击与&lt; a&gt;元素里面没有javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！