如何將我的按鈕組定位到我的列表項目右側

Question

我已經構建了一個Jquery移動列表視圖。它得到了emlements dynamicaly（我已經硬編碼之一，所以你可以看到）：

<ul id="tripData" data-role="listview" class="ui-listview"> 
    <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Lads Holiday<p><b> Start Date: 2016-03-03</b></p><p><b> End Date: 2016-03-03</b></p><input type="hidden" value="15"></a> 
    </li> 
</ul> 

而且我已經建立了一個jQuery Mobile的按鈕組：

 <div data-role="controlgroup" data-type="horizontal"> 
     <a href="#" data-role="button" data-icon="gear">Edit</a> 
     <a href="#" data-role="button" data-icon="delete">Delete</a> 
     </div> 

我想知道的是：在哪裏這個按鈕組需要去，做什麼風格，我需要補充，爲了使結果看起來像這樣的列表中的每個元素：

Answer 1

add id="mybtn" to the line below 
<div data-role="controlgroup" data-type="horizontal" class="mybtn"> 
and add this code yo your css 
.mybtn{ 
position: absolute; 
right:0px; 
bottom:0px; 
} 

.mybtn{ 
 
    position: absolute; 
 
    right:0px; 
 
    bottom:0px; 
 
}

<ul id="tripData" data-role="listview" class="ui-listview"> 
 
    <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Lads Holiday<p><b> Start Date: 2016-03-03</b></p><p><b> End Date: 2016-03-03</b></p><input type="hidden" value="15"></a> 
 
    </li> 
 
</ul> 
 
<div data-role="controlgroup" data-type="horizontal" class="mybtn"> 
 
     <a href="#" data-role="button" data-icon="gear">Edit</a> 
 
     <a href="#" data-role="button" data-icon="delete">Delete</a> 
 
     </div>

Answer 2

可以使用CSS Flexbox的，喜歡運用一些CSS樣式：

.content-holder { 
 
    border: 1px solid #333; 
 
} 
 

 
div[data-role="controlgroup"] { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
} 
 

 
div[data-role="controlgroup"] a { 
 
    padding: 5px 15px; 
 
    border: 1px solid #333; 
 
    border-bottom: none; 
 
} 
 

 
div[data-role="controlgroup"] a:hover { 
 
    background: #eee; 
 
} 
 

 
div[data-role="controlgroup"] a:first-child { 
 
    border-left: none; 
 
    border-right: none; 
 
}

<div class="content-holder"> 
 
<ul id="tripData" data-role="listview" class="ui-listview"> 
 
    <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Lads Holiday<p><b> Start Date: 2016-03-03</b></p><p><b> End Date: 2016-03-03</b></p><input type="hidden" value="15"></a> 
 
    </li> 
 
</ul> 
 
     <div data-role="controlgroup" data-type="horizontal"> 
 
     <a href="#" data-role="button" data-icon="delete">Delete</a> 
 
     <a href="#" data-role="button" data-icon="gear">Edit</a> 
 
     </div> 
 
</div>

希望這有助於！