我正在尝试制作一个类似于下面链接中的列表的列表视图（但不使用 JQM）。 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/listviews/#list-formatted
在过去几天尝试了各种方法之后（包括复制 JQM 属性的错误尝试），这就是我目前拥有的：
但是仍然存在一些问题：
- li border-bottom 出现在顶部而不是底部
- 在小宽度处，点与文本重叠而不是显示椭圆
- 点（箭头）未正确垂直居中
这是HTML：
<ul>
<li>
<a href="#">
<div>
<span class="label">Richard F. Godwin</span><br/>
<span class="subtext">Direct Research Representative</span><br/>
<span class="subtext">Ann Arbor, MI</span>
</div>
<img class="icon"></img>
</a>
</li>
</ul>
和CSS：
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 100%;
float: left;
overflow: hidden;
}
ul li {
clear: both;
margin: 0px;
padding: 0px;
background-color: #ffffff;
border-bottom: 1px solid #bbb; /* appears at the top instead of bottom */
}
ul li a {
padding: 15px 20px;
margin: 0px;
width: 100%;
float: left;
}
ul li a div {
margin: 0;
padding: 0px;
width: 80%;
float: left;
display: block;
}
ul li a div span.label {
font-size: 15px;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
}
ul li a div span.subtext {
margin-left: 10px;
color: #067ab4;
font-size: 14px;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis; /* always overlaps instead of showing ellipses on short widths */
}
ul li a img {
height: 18px;
width: 18px;
background-color: rgba(0, 0, 0, .4);
-webkit_border-radius: 9px;
border-radius: 9px;
display: block;
background-repeat: no-repeat;
float: right;
position: relative;
margin-top: 11px; /* not centered correctly when li has a different height */
right: 35px;
display: block;
vertical-align: middle;
}
CSS定位和样式对我来说大多是新的。任何帮助是极大的赞赏。