创建一个JQuery Mobile风格列表视图（没有JQM）

我试图做一个列表视图，看起来类似于下面的链接中的列表（但不使用JQM）。 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/listviews/#list-formatted 创建一个JQuery Mobile风格列表视图（没有JQM）

与过去几天的各种方法（包括复制JQM性质产生不良企图）试验后，这是我目前有：

http://jsfiddle.net/GNnN2/

还有许多

李在小WIDT顶部出现，而不是底部
下边框：虽然问题h时，点重叠文本而不是示出椭圆
点（箭头）没有正确垂直居中

下面是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定位&造型对我来说大都是新的。任何帮助是极大的赞赏。

来源

2013-04-20 PowerRager

嗯，我想我已经做了很多，他们已经在jQuery做了。为中心的形象，我基本上只是把它作为背景。为了修复边界，我添加了 overflow:hidden;这就是它。

这里有一个小提琴： http://jsfiddle.net/GNnN2/4/

来源

2013-04-20 07:02:23 Breezer

好多了，谢谢！我需要最终解决文本/箭头重叠问题，但是您的代码将处理所有主要问题。 – PowerRager 2013-04-20 16:14:17

创建一个JQuery Mobile风格列表视图（没有JQM）

回答

相关问题