在拆分按钮列表中有一个复选框

Question

我的客户希望有一个split button list，但不是图片，而是有一个复选框。这样，用户可以选中/取消选中某个项目，或触摸右箭头以获取更多信息。

问题是：

  

默认样式会将元素的宽度设置为100％   父容器。

问：如何将checkbox合并到拆分按钮列表中？

Answer 1

这很有效：

<div class="ui-grid-a">
   <div class="ui-block-a">
      <input checked type="checkbox" name="CollID" id="CollID217" class="custom">
      <label for="CollID217">xxx</label>
   </div>
   <div class="ui-block-b">
      <a href="#" data-inline="true">Details</a>
   </div>
</div>

然后将其设为：

.ui-grid-a .ui-block-a { width: 85% }
.ui-grid-a .ui-block-b { width: 15%; } 

.ui-grid-a .ui-block-b a { 
float:right;
}