如何在<li>标签内插入图像而不更改</li> <li>标签的高度？</li>

Question

我有这个移动菜单：

正如您所看到的，带有图像的<li>标签会使底部扩展一点，而<li>标签内没有任何图像的“Boxing”则不会。 我在height: 27px标记处尝试了“<li>”。工作完美。问题是，当点击图像时 - 在<li>内打开一个子菜单 - 定义高度时它不会扩展。

这是html列表项的外观：

                <ul class="sports">
                    <a href="#" >
                        <li url="http://google.com">NFL
                            <img src="strokesmenu.jpg"   id="sub-menu" />
                            <ul class="sports2">
                                <a href="#" class="selected">
                                    <li>Superbowl</li>
                                </a>
                            </ul>
                        </li>
                    </a>

// one without an image: 

                    <a href="#"><li> Boxing</li></a>

这是我的css：

.sports li{
    list-style-image:none;
    list-style-type: none;
    border-bottom: 2px solid #eeeeee;
    margin-bottom: 0px; 
    margin-left: 0px; 
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 10px;
    width:100%;
    font-family: arial;
    text-decoration: none;
    overflow: hidden;
    /*height: 27px;*/
    z-index: 100;
}

Answer 1

给图像赋予Max-height，使其不会比li

更大

li > img{
max-height:100%;
}

我希望它有效