gpt4 book ai didi

css - 使用 CSS 格式化 Jquery Mobile Listview 元素

转载 作者:太空宇宙 更新时间:2023-11-04 12:55:44 24 4
gpt4 key购买 nike

我想知道是否有可能像下面的示例那样有一个列表项(我尝试添加图片,但该网站不允许。我猜 b/c 我是新手)。如您所见图标在左侧,“标题图像”与“图像 2”对齐,它们由水平线分隔。然后您可以并排看到文本字段(也由水平线分隔)

-------------------------------------------- ------------------------------
|**********|__________标题图片______|__IMAGE2_|
|**图标**| ----------------------------------------------|., ,,,.,,,.........|
|**********|...................... 文本 ..................... ...............|,,,文本..,,,,|
|**********|................................................ ...................|................|
---------------------------------------------- --------------------------

我看到有一些方法可以用 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>

最佳答案

您可以使用一些绝对定位来实现所需的外观:

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

Here is a DEMO

注意:如果标题图像包含图像中的文本并且您希望它拉伸(stretch)以适应 LI 的当前宽度,这将扭曲文本...

关于css - 使用 CSS 格式化 Jquery Mobile Listview 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25843446/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com