如何将我的按钮组放在列表项的右侧

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>

我想知道的是：这个按钮组需要去哪里，我需要添加哪些样式，以便列表中的每个元素的结果如下所示：

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样式，例如：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！