1

我有一个列表视图,我想添加一些图标。我希望最终结果在这里看起来像这样:

斯坦福移动网页

如您所见,图标看起来非常漂亮(与文本大小相同)。现在我正在尝试对我的项目做同样的事情。但是我得到了这个结果:

在此处输入图像描述

如您所见,图标看起来非常小......我正在查看斯坦福网站的页面源代码,他们所做的是:

    <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;
}
4

2 回答 2

6

使您的图标图像大小为 40x40 像素。

找到你正在使用的 jquery.mobile-1.3.0.css,用新的替换这个旧的 css。

旧的 CSS

.ui-listview .ui-li-icon { 
    max-height: 16px; 
    max-width: 16px; 
    left: 10px; 
    top: .9em; 
}

新的 CSS

.ui-listview .ui-li-icon {
    max-height: 40px;
    max-width: 40px;
    left: 10px;
    top: .9em;
}
于 2013-06-05T03:19:57.137 回答
0

当您事先知道图标的比例时,@yeyene 给出了一个很好的答案。在某些情况下,您只知道图标的高度。尝试重新定义.ui-listview .ui-li-icon类:

.ui-listview .ui-li-icon {
  max-height: 100% !important;
  max-width: 100% !important;
  position: static !important;
  vertical-align: middle;
  padding-right: 10px;
}

max-height和属性赋予图像由和属性定义的max-width原始大小。其他三个属性使图像与文本行对齐。heightwidth

要摆脱默认的左填充,您可以在链接中添加一个额外的类:

<ul data-role="listview" data-inset="true">
    <li><a href="news/" class="custom-listlink"><img src="img/icon/news.png" alt="News" class="ui-li-icon">News</a></li>
    <li><a href="events/" class="custom-listlink"><img src="img/icon/events.png" alt="Events" class="ui-li-icon">Events</a></li>
</ul>

和 CSS:

.custom-listlink {
  padding-left: 1em !important;
}
于 2017-04-08T19:30:09.120 回答