Question

我试图制作一个类似于下面链接列表的列表视图（但不使用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定位＆amp;造型对我来说几乎是新的。非常感谢任何帮助。

Answer 1

好吧，我想我已经完成了他们在jquery做过的事情。使图像居中我基本上只是使它成为一个背景。并修复我添加的边框 overflow:hidden;就是这个。

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

创建JQuery Mobile样式列表视图（不使用JQM）

1 个答案: