如何使listview li-element / item更小?如何使用图像和文本更改高度?

时间:2013-04-22 21:27:49

标签: javascript jquery html html5 jquery-mobile

我想将li-element(listview-item)的高度更小并在verticalcenter中设置两个texttitles?

enter image description here

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
   <li data-role="list-divider" class="mid">Neue News</li>
   <li>
      <a href="">
        <img src="news.png" height="40px"/>
        <h2>Title</h2>
        <p>Subtitle</p>
      </a>
   </li>
</ul>

1 个答案:

答案 0 :(得分:0)

也许是这样的:

http://jsfiddle.net/TgkKf/6/

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
   <li data-role="list-divider" class="mid">Neue News</li>
   <li class="newsLink">
  <a href="">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTy-aBig-8SnIgGIlBOWmy_yMPLTIhXvB77apn5LoHoP1M7k6SCag" height="20px" />
        <div class="wrapperDiv">
            <h2>Title</h2>
            <br />
            <div style="font-size:8px;">Subtitle</div>
        </div>
      <div style="clear:both;"></div>
  </a>

   </li>
<li>
    asdf
</li>
</ul>

CSS

.newsLink
{
    vertical-align:text-top;
}

.newsLink h2
{
   font-size:10px;
}

.newsLink .wrapperDiv
{
    line-height:10px;
    float:left;
}

.newsLink .wrapperDiv div
{
 float:left;   
}

.newsLink img
{
    float:left;
}

.newsLink h2
{
    float:left;
    padding:0;
    margin:0;
}
.newsLink div
{
    padding:0;
    margin:0;
}