JQuery Mobile - 单击自定义列表视图高度更改

Question

我有一个自定义项目高度（50px）的JQuery Mobile列表视图。每当单击该项目时，其高度会发生变化。如何固定自定义高度？

小提琴： http://jsfiddle.net/3gnvhxth/6/

我正在使用JQuery Mobile v1.45和JQuery 1.11.1。

点击之前：

点击后：

HTML：

<ul data-role="listview" data-inset="true">
    <li class="custom_item">
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image1">
            Click Item 1
        </a>   
    </li>
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image2">
            Click Item 2
        </a>   
    </li>
    <li class="custom_item">
        <a class="custom_link" href="http://google.com" target="_blank">
            <img class="custom_image" src="http://placehold.it/120x120&text=image3">
            Click Item 3
        </a>   
    </li>
</ul>

CSS：

.custom_item {
    height: 50px;
    max-height: 50px;
}
.custom_link {
    padding-left: 50px !important;
    height: 50px;
    max-height: 50px;
}
.custom_image {
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
}

Answer 1

你的css中有一个导致问题的默认最小高度

<强> CSS

.ui-listview > .ui-li-has-thumb > .ui-btn, .ui-listview > .ui-li-static.ui-li-has-thumb {
    min-height: 3.625em; // Remove this or adjust to your needs
    padding-left: 6.25em;
}

Answer 2

Luis对jQM CSS文件的最小高度是正确的。您需要覆盖它，但也要删除链接上的顶部和底部填充，因为这会导致单击时出现高度问题：

.custom_link {
    padding-left: 50px !important;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 50px;
    max-height: 50px;
    min-height: 0 !important;
    height: 50px;
}

  

更新了 FIDDLE

设置行高可使文本垂直居中。如果这对您不重要，请将其删除。