リストビューがあり、いくつかのアイコンを追加したいと考えています。最終結果を次のようにしたい:
ご覧のとおり、アイコンはとても見栄えがします (テキストと同じサイズ)。今、私は自分のプロジェクトで同じことをしようとしています。しかし、私はこの結果を得ます:
ご覧のとおり、アイコンは非常に小さく見えます...スタンフォード サイトのページ ソースを表示していますが、その機能は次のとおりです。
<ul data-role="listview" data-inset="true">
<li><a href="news/"><img src="img/icon/news.png" alt="News" class="ui-li-icon">News</a></li>
</ul>
つまりclass="ui-li-icon"
、リストに属性を追加します。しかし、これは本当に小さなアイコンになります..(私は48x48、32x32で試しました...)
どうすればこれを修正できますか? 何か案は?
編集
前述のサイトの動作を再現しようとしているので、スタンフォードのページから CSS を引用します。たぶん、誰かがこの振る舞いをどこで正確に行うかを見ることができます。
/* Widen and center h1 text between "Back" and "Home" buttons */
.ui-title {
width:50%;
margin-left:26% !important;
margin-top: 0 !important;
padding: 5px 0 !important;
}
/* Align Home button left */
.ui-header .ui-btn-right {
left:10px;
right:inherit;
}
/* Capitalize header h1 */
.ui-header h1 {
text-transform:capitalize;
}
/* Full Site/About icon spacing */
.ui-btn-inner {
padding-left:40px;
}
/* Nested list width fix http://bit.ly/fJGPsg */
.ui-li .ui-btn-inner a.ui-link-inherit {
padding-top:0.7em;
padding-right:30px;
padding-bottom:0.7em;
}
/* Remove background seal */
.ui-content {
background:none;
}
/* Make time aside smaller to allow for longer titles */
.ui-li-aside {
width:20% !important;
}
/* add space after list dividers */
ul.copy-divider {
margin:20px -15px 0 -15px !important;
}
/* Home page banner */
h2#banner {
background:transparent url(../img/banner/banner.jpg) no-repeat left 10px;
width:320px;
height:284px;
margin:-10px auto -150px auto;
text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
width:480px;
height:290px;
margin:-10px auto -175px auto;
text-indent:-9999px;
}
/* Remove reduntant extra top padding - don't put h2's in front of ul.listview */
h2 {
margin:0;
font-size:20px;
}
/* Home page icons */
.ui-li-icon {
top:0.4em !important;
}
/* Make room for icons */
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {
padding-left:47px;
}
/* Add space after intro paragraphs */
p.intro {
margin-bottom:30px !important;
}
/* Search box top margin */
.ui-listview-filter {
margin-top:20px;
}
/* Remove bold from grid */
.ui-grid-b {
font-weight:normal;
}
/* About */
#about-stanford {
background:url(../img/logos/about-stanford.png) no-repeat left top;
text-indent:-5000px;
width:254px;
height:50px;
margin:0 auto;
}
/* Dynamic pages */
/* News */
/* Thumbnails */
.ui-li-thumb {
top:21px;
}
/* Don't append headline */
#news h3 {
white-space:normal;
}
/* Events */
/* Capitalize first letter in Events pages */
#event h1 {
text-transform:capitalize;
}
/* Don't append headline in Events list page paragraphs */
#event h3, #featured h3, #today h3 {
white-space:normal;
padding-bottom:1px; /* Make room for links bottom-border */
}
/* Format Events thumbnails to match News thumbs size for consistencey */
#event .ui-li-thumb, #featured .ui-li-thumb, #today .ui-li-thumb {
top:auto;
max-height:80px;
}
/* e theme */
.ui-btn-up-e { /* Lighter gradient: light to dark */
background:-webkit-gradient(linear, center top, center bottom, from(rgba(157,149,115,.5)), to(rgba(157,149,115,.7)));
border:#000 !important;
}
.ui-btn-hover-e { /* Darker gradient: light to dark */
background:-webkit-gradient(linear, center top, center bottom, from(rgba(196,191,169,.7)), to(rgba(196,191,169,1)));
border:red;
}
ui-btn-down-e {
background:green;
border:green;
}