css - 列表视图中的 JQuery 移动/输入文本

Question

我有几个输入字段位于列表视图条目中。所以现在我正在尝试以一种看起来像普通列表视图条目的方式设置输入字段的 CSS 样式。

输入字段将由 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 */
}

然后，对于列表视图中的输入，将类设置为 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/