ボタン・グループをリスト項目の右側に配置する方法

Question

Jqueryモバイル・リスト・ビューを作成しました。

<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のモバイルボタングループを構築しています：私が知りたいのはある

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

：それは（あなたが見ることができますので、私は、ハード1をコード化している）dynamicalyそのemlementsを取得する場所このボタングループは行く必要がない、と私は結果がリストの各要素に対して次のようになりようにするために、追加するためにどのようなスタイルを必要とします：

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フレキシボックスを使用して、いくつかの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>

この情報がお役に立てば幸い！