Question

我想知道是否可以像下面的示例那样列出一个列表项目（我试图添加一个图像，但是这个网站不允许它。我猜测b / c我＆＃39;新的）。如您所见，图标位于左侧，＆＃34;标题图像＆＃34;与＆＃34; image2＆＃34;对齐他们分开了一条水平线。然后你可以并排看到文本字段（也用水平线分隔）

----------------------------------------------- -------------------------------
| ********** | ___________标题图片______ | __IMAGE2_ |
|的 ** ** ICON | ----------------------------------------------- |。， ,,, ,,, ......... |。
| ********** | ................... TEXT ........... ................. | ,,, TEXT .. ,,,, |
|的 ********** | ............................... ........................... | .................. |
-------------------------------------------------- ----------------------------

我看到有一些方法可以用CSS覆盖列表属性，但是我对这方面的经验很少，并且不知道在哪里进行更改。我在网站上看到了这个示例，它左侧有图标，但不是我需要的其他部分。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<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>
</head>
<body>

<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>Split Buttons</h2>
<ul data-role="listview" data-inset="true">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a free, open-source web browser. Released in 2008.</p>
    </a>
    <a href="#">Some Text</a>
  </li>
  <li>
    <a href="#">
    <img src="firefox.png">
    <h2>Mozilla Firefox</h2>
    <p>Firefox is a web browser from Mozilla. Released in 2004.</p>
    </a>
    <a href="#">Some Text</a>
  </li>
</ul>
</div>
</div> 

</body>
</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/80/technics/1/" />
        <img src="http://lorempixel.com/880/20/technics/2/" class="headerImage" />
    <p>First set of description text.</p>
    </a>
    <div class="right-radio">
        <img src="http://lorempixel.com/80/20/technics/6/" />
             <p>Some Text</p>
    </div>
  </li>
</ul>

.has-right-radio a {
    margin-right: 80px !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-top: 20px;
    padding-bottom: 0;
}
.headerImage {
    position: absolute;
    top: 0;
    left: 80px !important;
}
.has-right-radio a p {
     white-space: normal  !important;
}
.right-radio {
    position: absolute;
    top: 0px; bottom: 0px; right: 0px;
    width: 80px;
    border: 1px solid rgb(221, 221, 221);    
}
.has-right-radio li:first-child .right-radio {
    border-top-right-radius: 5px !important;
}
.has-right-radio li:last-child .right-radio {
    border-bottom-right-radius: 5px; !important;
}
.right-radio p {
    position: absolute;
    top: 20px; bottom: 4px; right: 4px; left: 4px;
    white-space: normal  !important;
}

这是 DEMO

注意：如果标题图像包含图像中的文本，并且您希望它伸展以适应LI的当前宽度，则会扭曲文本...

使用CSS格式化Jquery Mobile Listview项

1 个答案: