css - JQuery mobile/在 ListView 中输入文本

Question

我有几个输入字段位于 ListView 条目内。所以现在我正在尝试 设置输入字段的 CSS 样式，使其看起来像普通的 ListView 条目。

输入字段将由 Angular 的 ng-model 填写，但这并不重要。

这就是我到目前为止所做的，但我认为我需要边距/填充等方面的帮助。

// CSS input
.ui-input-text{ 
  border: none !important;
  box-shadow: none !important;
  background-color : transparent;
}

// HTML
<ul data-role="listview" data-divider-theme="b">
<li data-role="list-divider">Verbraucher</li>
<li data-mini="true"> <a href="#">
// This should look like a "normal" listview entry!
<input type="text" ng-model="cust.firstname" name="cust_firstname" required>    
</a></li>
... 

两者看起来应该是一样的!

Answer 1

尝试将以下内容添加到您的 CSS 中:

.ui-input-listview {
  margin-top: -1em !important;
  margin-bottom: -1em !important;
  margin-left: -0.5em !important; /* If you want to fix left as well */
  margin-right: -0.5em !important; /* If you want to fix right as well */
}

然后，对于listview中的输入，将类设置为ui-input-listview

<input class="ui-input-listview" type="text" ng-model="cust.firstname" name="cust_firstname" required="required">

jsFiddle 在这里 - http://jsfiddle.net/EnF2w/1/