0

以下のリンクのリストに似たリスト ビューを作成しようとしています (ただし、JQM は使用していません)。 http://view.jquerymobile.com/1.3.1/dist/demos/widgets/listviews/#list-formatted

過去数日にわたってさまざまな方法を試した後 (JQM プロパティを複製するという悪い試みを含む)、これは私が現在持っているものです:

http://jsfiddle.net/GNnN2/

ただし、まだ多くの問題があります。

  • 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 のポジショニングとスタイリングは、私にとってほとんど新しいものです。どんな助けでも大歓迎です。

4

1 に答える 1

0

まあ、私は彼らがjqueryでやったのとほぼ同じことをしたと思います。画像を中央に配置するために、基本的には背景にしました。そして、追加 overflow:hidden;した境界線を修正するのはこれで終わりです。

ここにフィドルがあります： http://jsfiddle.net/GNnN2/4/

于 2013-04-20T07:02:23.323 に答える