使用固定的元素集自定義列表項

我試圖自定義列表項的佈局。在右側，我想保留一組2個按鈕（編輯，刪除）和複選框（啓用）。在剩餘區域的左側應填寫描述性內容。喜歡這個。使用固定的元素集自定義列表項

[------------ sizing area ------------][fixed width]

我嘗試了UI的佈局併網，但我只能定義一個比例的寬度如。 80％-20％。

<ul data-role="listview"> 
    <li> 
     <div class="ui-grid-c"> 
      <div class="ui-block-a" style="width:60%;"> 
       content     
      </div> 
      <div class="ui-block-b" style="width:20%;"> 
       <input id="enable1" type="checkbox" value="true" class="custom"/><label for="enable1">Enabled</label> 
      </div> 
      <div class="ui-block-c" style="width:10%;">       
       <a id="edit1" href="" data-role="button" data-icon="gear" data-iconpos="notext">Edit</a> 
      </div> 
      <div class="ui-block-d" style="width:10%;"> 
       <a id="delete1" href="" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a> 
      </div> 
     </div> 
    </li> 
</ul>

按照要求與代碼的jsfiddle： http://jsfiddle.net/qN7P6/

來源

2014-04-19 LisL

請張貼相關代碼 – underscore

您可以創建一個jsfiddle來演示哪裏出了問題。從你目前的html中，css丟失了，所以我不能重現發生了什麼問題。 – rene

我想通了，如何解決這個問題。基本上，我在一個單獨的div中添加了內容，並且在一個div中添加了3個動作，並且使用了ui-grid-作爲float:right。爲了垂直對齊，我添加了一些邊距。

我調整了樣本，我把原代碼留在頂部<ul>，新代碼在<ul>的下面。 http://jsfiddle.net/qN7P6/1/

<ul data-role="listview"> 
    <li style="height:28px;"> 
     <div>adjusted content</div> 
      <div class="rightbuttons"> 
      <div class="ui-grid-a"> 
       <div class="ui-block-a" style="width:62%;"> 
        <label data-inline="true"><input type="checkbox" data-inline="true" />Enable</label> 
       </div> 
       <div class="ui-block-b" style="width:38%; margin-top:5px;"> 
        <a id="edit1" href="" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Delete</a> 
        <a id="delete1" href="" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true">Edit</a> 
       </div> 
      </div> 
     </div> 
    </li> 
</ul>

CSS：

.rightbuttons { 
    float:right; 
    width:210px; 
    margin-top:-36px; 
}

我知道，所有的樣式屬性應該被移到CSS清理東西。但我會留給讀者看。

來源

2014-04-26 13:30:39 LisL

使用固定的元素集自定義列表項

回答

相關問題