Question

我希望“lorem ipsum”文本尽可能向右延伸。但是，当我将“Some Text”标签添加到listview的右侧时，“lorem ipsum”文本不再像没有它那样向右突破。我如何覆盖CSS类以获得所需的格式？（我试图覆盖JQ移动CSS文件（.ui-li-aside格式化我认为的标签）。有关带标签的示例，请参阅jsfiddle链接。

http://jsfiddle.net/soa9k46w/1/

<div data-role="content">
    <ul data-role="listview" data-icon="false">
        <li>    <a href="#">

                      <h2>Some Title</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                      </a>

            <p class="ui-li-aside ui-li-count"><strong> Some Text</strong>
            </p>
        </li>
    </ul>
</div>

Answer 1

为了使它与你的小提琴中的第二个例子相匹配，你可以覆盖用子节点分配给锚元素的类，例如：

.ui-listview > .ui-li-has-count > .ui-btn {
    padding-right: 1em !important;
}

Example

注意：使用!important is not ideal，但在这种情况下，需要覆盖默认的jQuery Mobile样式，即为其添加2.8125em padding-right值锚

另一种（可能更好的）替代方法是使用jQuery从已赋予它的任何ui-li-has-count元素中删除li类：

$('.ui-btn').closest('li').removeClass('ui-li-has-count');

如果您不希望这会影响整个网站，请将其设为特定网站，例如：

$('#your_container').find('.ui-btn').closest('li').removeClass('ui-li-has-count');

Example

在JQuery mobile ListView中格式化文本

1 个答案: