自定义列表视图项布局

问题描述：

我想要的是像每个列表项的布局：自定义列表视图项布局

enter image description here

但是我得到的是更象：

enter image description here

所以我想到：

把div1占据一个特定的宽度，例如20px（in百分比会更好...），并且填写的是heigth（列表项heigth）。我已经试过把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>

答

，我使用的解决方案是：

<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>

答

像这样的事情？ 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; 
}

几乎...不工作的唯一的事情是DIV2的宽度。它没有占用剩下的空间。它像以前一样...可能是与jQuery Mobile风格相关的东西吗？ – amp 2013-04-28 15:47:15

答

使用jQuery Mobile的1.3我使用从文档列表视图控件来实现我想你会为使用的例子。

<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>

自定义列表视图项布局

相关推荐