自定义列表视图项目布局

Question

我想要的是每个列表项的布局，如：

但我得到的更像是：

所以我想：

• 将div1设置为占用特定宽度，例如20px（以百分比表示会更好......）并且填充的高度是父高度（列表项高度）。我已经尝试过heigth:100%但没有效果。
• div2应该用一些填充占据水平空间的其余部分。

如何操作css样式呢？

到目前为止，我的代码如下：

<script id="listItemTemplate" type="text/x-jsrender">

    <li class="listItem">
        <div class="div1">&nbsp;</div>
        <div class="div2">Some content</div>   
    </li>

</script>

<style>
    .ui-li-static.ui-li {
        padding: 0px;
    }

    .listItem div {
        display: inline-block;
    }

    .div1{
        width: 20px;
    }

    .div2{
        padding: 15px;
    }
</style>

Answer 1

这样的东西？ DEMO

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    width: 100%;
}

li {
    display: table-row;
}

.listItem div {
    display: table-cell;
}

.div1 {
    width: 10%;
}

.div2 {
    width: 90%;
    padding: 15px;
}

Answer 2

使用jQuery Mobile 1.3我使用了一个示例，使用文档中的listview小部件来实现我认为你的目标。

<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
    <li><div class="div1">test</div><div class="div2wr"><div class="div2">test2</div></div><div class="clr"></div></li>
</ul>

<style type="text/css">
.div1, .div2wr{
    height:30px;    
}
.div1 {
    width: 10%;
    background:black;
    float:left;
}

.div2wr {
    width: 90%;
    float:right;

}
.div2 {
    margin:5px;
    height:20px; /* height must be height of div1/div2wr minus div2 margin X2 */
    background:blue;
}
.clr{
    clear:both;
}
.ui-li-static.ui-li{padding:0px;
}
</style>

Answer 3

我使用的解决方案是：

<script id="listItemTemplate" type="text/x-jsrender">

    <li class="listItem">
        <div class="div2" style="border-left-color: #{{:CorBack}};">
            Some content
        </div>
    </li>

</script>

<style>

    .ui-li-static.ui-li {
        padding: 0px;
    }

    .div2{
        padding: 15px;
        border-left-width:15px;
        border-left-style:solid;
    }
</style>