30303


jQuery mobileを使って、リストの左側にはサムネイル画像(jpg)、その右にはタイトルを表示させたいと思っています。  
サムネイル画像は160(px)x90(px)で作成していますが、  
(1) サムネイル画像の下に10pxくらいの隙間ができる。高さは90pxに指定しているのに？  
(2) タイトル(テキスト)がサムネイルの下に潜り込む  
(3) タイトルが長い場合に折り返したいが、最後に「...」となる。

以下、ソースを添付します。上記(1)(2)(3)の解決方法をご存知の方は是非ご教示お願いします。

(index.html)

[code]

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>jQuery Mobile</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
        <link rel="stylesheet" href="jquery_css.css" />
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
    </head>
    <body>
    <ul data-role="listview">
        <li class="ui-li-has-thumb">
            <a href="#" target="_blink"">
                <img src="e465f85281ef29a3f50850a7fba82f60.jpg" style="max-width:160px;max-height:90px;top:0;left:0;">
                <h3 style="padding-left:5px;">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</h3>
            </a>
        </li>
    </ul>
    </body>
    </html>
    
[/code]

(jquery_css.css)

[code]

    .ui-li .ui-btn-text a.ui-link-inherit h3{
       white-space: normal !important;
    }
    
    li {height:90px !important;}
    
[/code]


CC BY-SA 3.0
2016-11-07T09:21:48.877
30181
2019-09-09T12:39:24.013
2019-09-09T12:39:24.013
32986
8593
question
css jquery-mobile
jQuery mobileを使ってサムネイル画像が付いたリスト表示のズレ


(1)はそのソースの書き方からこうすればいいと思います。

[code]

    li {height:90px margin-bottom:0px !important;}
    
[/code]

(3)はclassの指定ミスの可能性を考えると

[code]

    .ui-li .ui-li-has-thumb .ui-btn-text a.ui-link-inherit h3{
       white-space: normal !important;
    }
    
[/code]

(2)は１つの方法としてpadding-leftを変えるという物がありますが、少々面倒です。もう少し良い方法があればその方がいいかと。


CC BY-SA 3.0
2016-11-10T08:24:37.167
30303
2016-11-10T08:24:37.167
18660
30181
answer