jQuery Mobile 1.4.0拆分按钮，仅限右按钮CSS

Question

我尝试创建一个列表视图，并在右侧有一个按钮。就像jQuery Mobile拆分按钮listview，但只有右侧按钮应该是可点击的。 左侧部分应该包含一个标签和一个文本输入。

我发现了这样的回答：https://stackoverflow.com/a/15292521/2026623

但这个答案使用的类中删除/ jQuery中移动1.4.0重命名。 我发现一些属性现在在.ui-btn-a中，但不是全部。

所以我试着自己实现它（对CSS有一点了解）。这是它到目前为止的样子：

HTML：

<li class="readonly-li-a"> 
    <a class="readonly-btn-a ui-field-contain"> 
     <label for="boss">Boss:</label> 
     <input type="text" id="boss" name="boss"> 
    </a> 
    <a data-role="button" data-inline="true" data-icon="bars" data-iconpos="notext"></a> 
</li> 

CSS：

.readonly-btn-a { 
    background: #fff!important /*{a-bup-background-color}*/; 
    color: #333!important /*{a-bup-color}*/; 
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; 
    cursor: default !important; /* don't change to hand cursor */ 
    border: none !important; 
} 

.readonly-li-a { 
    border: 0 solid #ddd !important; 
    border-top-width: 1px !important; /*the line above the li */ 
    padding: .7em 1em !important; /*copied from .ui-li-static */ 
    background: #fff!important; /*white background instead of grey*/ 
    margin: 0 1px!important; /*the li stands out by 1px left/right without this*/ 
    -webkit-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/  rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
    -moz-box-shadow: 0 1px 3px /*{global-box-shadow-size}*/   rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
    box-shadow: 0 1px 3px /*{global-box-shadow-size}*/    rgba(0,0,0,.15) /*{global-box-shadow-color}*/; 
} 

而这正是它看起来在行动： http://jsfiddle.net/MasterQuestMaster/QJ9m2/

有2个问题这个解决方案，我希望有人能帮我解决它们。

• 如果您输入文本字段，蓝色光芒会被-Tag的 边框切断。我认为这是因为我添加了 来填充.readonly-li-a。
• 文本输入没有正确对齐（在 标签虽然）

或者，也许有人甚至已经在我之前尝试过这一点，并找到了一个更好的解决方案。如果是这样，请发布。

Answer 1

随着标记的轻微变化，我相信你可以用2个CSS规则做到这一点。现有的用户界面丽静和UI的身体继承的类照顾李的，所以你只需要保证金规则排队输入和一类为只读-BTN-A：

<ul data-role="listview" data-inset="true"> 
    <li> 
     <div class="ui-field-contain"> 
      <label>Normal:</label> 
      <input type="text" id="normal" name="normal"/> 
     </div> 
    </li> 
    <li class="ui-li-static ui-body-inherit"> 
     <a href="#" class="readonly-btn-a" > 
      <div class="ui-field-contain"> 
       <label>Link:</label> 
       <input type="text" id="link" name="link"/> 
      </div> 
     </a> 
     <a href="#" class="ui-btn ui-icon-bars ui-btn-icon-notext ui-btn-inline"></a> 
    </li> 
    <li> 
     <div class="ui-field-contain"> 
      <label>Normal:</label> 
      <input type="text" id="normal2" name="normal2"/> 
     </div> 
    </li> 
</ul> 

li .ui-field-contain { 
    margin-right: 42px; !important; 
} 
.readonly-btn-a { 
    background:    #fff!important /*{a-bup-background-color}*/; 
    color:     #333!important /*{a-bup-color}*/; 
    text-shadow: 0 /*{a-bup-shadow-x}*/ 1px /*{a-bup-shadow-y}*/ 0 /*{a-bup-shadow-radius}*/ #f3f3f3 /*{a-bup-shadow-color}*/; 
    cursor: default !important; 
    border: none !important; 
    padding: 0 !important; 
    margin: 0!important; 
} 

这里是一个更新FIDDLE（基于杰夫好的答案）

更新：少填充的LI元素中添加：

.ui-listview>.ui-li-static { 
    padding-top: 0 !important; 
    padding-bottom: 0 !important; 
} 

更新DEMO

Answer 2

您是否必须使用jQuery手机进行造型？如果您将data-role ='none'分配给您的输入框并在CSS中单独设置样式，可能会更容易。我在项目上完成了这一切，仅仅是因为试图让jQuery移动表现可能有点困难。