Styling-jquery mobile listviews

im Versuch, den Stil eines listview-Steuerelements, aber im habend Probleme... wenn ich die Breite des Bildes, 40px, wie gezeigt, im markup. ich kann nicht scheinen, um die Inhalte zu richten ordnungsgemäß auf der linken Seite. dh. ich dnt wollen, dass die Kluft zwischen Bild und text. hier ist mein markup

    <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> 

genau zu klären, ist dies die markup, die ich von 'element untersuchen'

<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>

sieht aus wie jquery-mobile fügt zusätzliche und Klassen der mrkup... irgendwelche Lösungen?
Styling-jquery mobile listviews

  • was sind die CSS-Eigenschaften (ab Inspektor) der Zeile: <div style="font-size:9pt;font-weight:normal;">WAIT .....</div> Hat den Raum komme aus einer linken margin/padding von diesem element oder von einem Recht in das Bild?
  • es ist ein padding-right von 100px; und es kommt für <div class="ui-btn-inner">. die Klassen waren automatisch Hinzugefügt von jqm
InformationsquelleAutor Sir Lojik | 2011-03-10
Schreibe einen Kommentar