jQuery mobileを使ってサムネイル画像が付いたリスト表示のズレ
jQuery mobileを使って、リストの左側にはサムネイル画像(jpg)、その右にはタイトルを表示させたいと思っています。
サムネイル画像は160(px)x90(px)で作成していますが、
(1) サムネイル画像の下に10pxくらいの隙間ができる。高さは90pxに指定しているのに?
(2) タイトル(テキスト)がサムネイルの下に潜り込む
(3) タイトルが長い場合に折り返したいが、最後に「...」となる。
以下、ソースを添付します。上記(1)(2)(3)の解決方法をご存知の方は是非ご教示お願いします。
(index.html)
<!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>
(jquery_css.css)
.ui-li .ui-btn-text a.ui-link-inherit h3{
white-space: normal !important;
}
li {height:90px !important;}