Question

我试图在列表视图的左侧创建一致大小的图像。我可以用背景尺寸实现我想要的东西：封面;

由于某种原因，右边的文字换行到下一行。

这是问题的一个例子。第一个项目只显示图像..问题是它是一个奇怪的大小，我希望它是一个正方形。所以我使用的是DIV +背景尺寸：封面;在第二个列表项目上显示我想要实现的内容..然后文本碰到下一行...有没有人知道如何将文本保留在图像的右侧？

<div data-role="page"> 
<div data-role="content">
    <ul data-role="listview"> 
        <li><a href="/somepage1"><img src="http://assets0.livecache.net/L6/3/IOGLO/835119998/188973969/2014-09-19_20.30.48_200px.jpg" /><h2>Some detail here</h2><p>Sub Detail</p></a></li>
        <li><div style="width: 70px; height: 70px; background-image: url(http://assets0.livecache.net/L6/3/IOGLO/835119998/188973969/2014-09-19_20.30.48_200px.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;"></div><a href="/somepage1"><h2>Some detail here</h2><p>Sub Detail</p></a></li> 
    </ul>
</div>

Answer 1

应用以下样式：

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li { 
  display: inline-block;
}

并将背景图片的div设为display: inline-block;

样式

display: block;的元素被视为其容器大小的全角元素，而不是它自己的宽度。

根据您的新问题进行编辑

因此，一旦切换版本，事情的配置就会有所不同，因为它们现在有不同的标签系统和样式。

无论如何，问题在于您最初希望自己的图片位于<a>标记内（文字所在的位置），您可能应将文字换成div或{{1}这样你就可以将它设置为span。

http://jsfiddle.net/8houxwnt/1/

jquery移动列表视图包装后的图像

1 个答案: