在JQuery移動設備中格式化文本ListView

我希望將「lorem ipsum」文本儘可能地擴展到右側。但是，當我將「Some Text」標籤添加到列表視圖的右側時，「lorem ipsum」文本不會像沒有它那樣向右打破。我如何重寫CSS類才能獲得所需的格式？（我試圖覆蓋JQ移動CSS文件（的.ui麗一邊格式的標籤，我相信）。見的jsfiddle鏈接，標籤和沒有一個例子。在JQuery移動設備中格式化文本ListView

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>

來源

2014-09-01 James Conr

，使其成爲第二個例子中你的提琴匹配，你可以重寫被分配給有孩子的錨元素的類，例如：

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

Example

注：使用!importantis not ideal，但在這種情況下，需要重寫，它是將一個2.8125em填充右價值錨默認jQuery Mobile的風格。

另一個（可能更好）的替代方法是使用jQuery從已經給它的任何li元素刪除ui-li-has-count類：

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

如果你不希望這會影響你的整個網站，使它具體，例如

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

Example

來源

2014-09-01 04:37:08

很好的解釋，謝謝您！我讓Jquery做我想做的事情時遇到了一些麻煩。另一個問題懸而未決：http://stackoverflow.com/questions/25600475/jquery-mobile-listview-cropping-thumbnail-image你是如何學習jQ類結構和修改哪些類的？ – 2014-09-01 07:08:45

使用元素檢查器來示例DOM元素 – 2014-09-01 09:07:53

在JQuery移動設備中格式化文本ListView

回答

相關問題