自定義列表視圖項佈局

Question

我想要的是像每個列表項的佈局：

但是我得到的是更象：

所以我想到：

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

Answer 1

，我使用的解決方案是：

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

Answer 2

像這樣的事情？ 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 3

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