Question

我一直在努力解决以下代码问题。我基本上需要做的是在元素的右侧 AND 左侧显示图像。两个图像应该是相同的大小。我还需要在任何视图中始终将文本置于中心位置。有一些能够改变字体和颜色的选择会很好。

<html>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">

<style>
    .ui-li-thumb, .ui-li-icon {
    max-height: 40px;
    max-width: 40px;
    height:35px; !important
    width:37px; !important
    position: absolute;
    padding-top:3px;
    padding-left:5px;    
    }

    li a { 
    min-height:20px !important; 
    height: 20px;
    padding-bottom: 10px;
    padding-top: 5px;
    }


    .ui-page .ui-content .ui-listview p {
    margin-top: -0.10em;
    margin-bottom: 0em;
    line-height    : 15px;
    vertical-align : top;
    font-size: 0.90em;
    font-weight: 600;
    padding-top: 20px;
    }
</style>

<ul data-role="listview" data-divider-theme="b" data-inset="true" >
    <li data-role="list-divider" role="heading"><center>ID</center></li>

    <li  data-icon = "false">
       <a href="#" > <img class="ui-li-thumb" src="http://lorempixel.com/80/80/technics/1/">                 
          <p>ID NAME <br>number</p>  
       </a>
    </li>


   <li  data-icon = "false">
      <a href="#" > <img class="ui-li-thumb" src="http://lorempixel.com/80/80/technics/1/">  
          <center><p>ID NAME</p><p><br>number</p></center>
      </a>
   </li>
</ul>
</html>

Answer 1

这是一种方法。

<ul data-role="listview" data-inset="true" class="has-right-radio">
    <li data-icon="false"> 
         <a href="#">
            <img src="http://lorempixel.com/80/40/technics/1/" />  
            <p class="green bigfont">ID1</p>
            <p class="green bigfont">First set of description text.</p>            
            <div class="right-radio"> 
                <img src="http://lorempixel.com/80/40/technics/6/" />
            </div>
         </a>
    </li>
</ul>

.has-right-radio {
    min-width: 240px;
}
.has-right-radio img {
    width: 80px;
    height: 50px;
}
.has-right-radio a {
    padding-right: 100px !important;
    min-height: 41px !important;
    padding-top: 4px;
    padding-bottom: 4px;
}
.has-right-radio a p {
    white-space: normal !important;
    text-align: center;
    margin: 0;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 80px;
    border: 0;
    background-color: rgb(246, 246, 246) !important;
}
.green {
    color: green;
}
.orange {
    color: orange;
}
.bigfont {
    font-size: 14px !important;
}

让我们来看看CSS：

第一条规则只是在整个列表中施加了最小宽度，这样图像就不会以较小的屏幕宽度相互碰撞。

第二个尺寸适合您的图像，无论其原始尺寸如何。在这个例子中，它们是80px宽和50px高。这是您可以更改图像高度的地方。

第三个向右添加填充，因此文本不会覆盖右图。此外，它设置顶部和底部填充并施加最小高度，以便显示图像。如果更改图像高度，则需要将此处的最小高度设置为所需的图像高度减去填充顶部减去填充底部减去1（边框）。

.right-radio规则绝对定位正确的图像，其余的规则基本上是格式化和定位文本。

以上是 DEMO

在Jquery Mobile的listview元素右侧添加一个额外的图像

1 个答案: