Javascript 样式化 jquery 移动列表视图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5265465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling jquery mobile listviews
提问by Sir Lojik
im trying to style a listview control but im having problems... when i set width of image to 40px as shown in markup. i cant seem to get the content to align properly to the left. ie. i dnt want that gap between image and text. here is my markup
我正在尝试设置列表视图控件的样式，但我遇到了问题......当我将图像宽度设置为 40px 时，如标记所示。我似乎无法让内容与左侧正确对齐。IE。我不想要图像和文本之间的差距。这是我的标记
<ul data-role="listview" class="ui-listview" data-inset="true" role="listbox">
<li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c" style='font-size:8pt;font-weight:normal'>
<?php echo fmtDate($x->date); ?>,<?php echo $name; ?> wrote on <?php echo $wname; ?>'s wall
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px'>34</span>
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style='right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px'>442</span>
</li>
<li role="option" tabindex="0" data-theme="c" >
<a href='#'>
<img width="40" height="40" src='<?php echo $imgstr; ?>'/>
<div style='font-size:9pt;font-weight:normal;'><?php echo nl2br(addSmilies(urlize(trim($x->msg))));?></div>
</a>
</li>
</ul>
just to clarify this is the markup i get from 'inspect element'
只是为了澄清这是我从“检查元素”中获得的标记
<ul data-role="listview" class="ui-listview ui-listview-inset ui-corner-all ui-shadow" data-inset="true" role="listbox">
<li data-role="list-divider" role="heading" tabindex="0" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-c ui-corner-top ui-btn-up-undefined" style="font-size:8pt;font-weight:normal">
Today, 55 minute(s) ago,Maggie Ferguson wrote on Maggie's wall
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:55px;background: url(../images/comment.png) no-repeat;padding:3px;padding-left:20px">34</span>
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="right:5px;background: url(../images/like.gif) no-repeat;padding:3px;padding-left:20px">442</span>
</li>
<li role="option" tabindex="-1" data-theme="c" class="ui-li-has-thumb ui-btn ui-btn-icon-right ui-li ui-corner-bottom ui-btn-up-c"><div class="ui-btn-inner"><div class="ui-btn-text">
<a href="#" class="ui-link-inherit">
<img width="40" height="40" src="../members/mariamjohnson/media/878_thumb.jpg" class="ui-li-thumb ui-corner-bl">
<div style="font-size:9pt;font-weight:normal;">WAIT A MINUTE,GWE DAN CAN YOU PLEASE BEHAVE YOURSELF,IF YOU HAVE NOTHING TO DO ,GO GET YOURSELF WASTED ELSEWHERE,YOU ARE ABUSIVE AND YOU ARE BEGINING TO IRRETATE ME LIKE A RASH.GURU CHAIN HIM UP,HE SHOULD NOT SPEAK UNTIL SPOKEN TO ,OK?</div>
</a>
</div><span class="ui-icon ui-icon-arrow-r"></span></div></li>
</ul>
looks like jquery mobile adds extra and classes to the mrkup... any solutions?
看起来 jquery mobile 向 mrkup 添加了额外的类...有什么解决方案吗？
回答by konsolenfreddy
Add a CSS file after you include the jQuery mobile CSS and overwrite the style
在包含 jQuery mobile CSS 并覆盖样式后添加 CSS 文件
.ui-li-has-thumb .ui-btn-inner {
min-height: 60px;
padding-left: 100px;
}
with your preferred padding, e.g.
使用您喜欢的填充，例如
.ui-li-has-thumb .ui-btn-inner {
min-height: 60px;
padding-left: 60px;
}
