Question

我正在使用离子应用程序。

我刚刚注意到我使用的列表比它的容器略大。

起初，我虽然与边境有关，但事实并非如此。

我知道这不是一个交易破坏者，但它对我来说确实很奇怪，而且我希望这个列表看起来不错并且容器没有退出（即使它是＆＃39;只有几个像素）

您可以在此处查看示例：http://codepen.io/NickHG/pen/VaogjL

如果您仔细观察，可以看到连接设置列表分隔符下方的所有内容都在外面。

我使用的代码是离子文档的简单列表：

<div class="hg-login-card-advanced-connection-settings">
    <div class="list">
         <div class="item item-divider">Connection Settings</div>
            <div ng-repeat="conn in connections">
               <item class="item item-toggle">
                {{conn.name}}
                  <label class="toggle toggle-primary">
                     <input type="checkbox" ng-checked="{{conn.checked}}" ng-model="conn.checked">

                      <div class="track">
                      <div class="handle"></div>
                     </div>
                   </label>
                  </item>
                  <item class="item hg-login-card-advanced-connection-settings-details" ng-show="conn.checked==true">
                    <input type="text" placeholder="testing">
                    <small class="hg-login-card-advanced-connection-settings-details-status">Status</small>
                  </item>
              </div>
           </div>
        </div>
   </div>

我该如何解决这个问题？感谢您的任何反馈和建议

Answer 1

您的.item有一个负余量，导致您的问题。用这个替换css解决了这个问题：

.item {
  margin: 0;
}

我不知道为什么会发生这种情况。它是离子基本css。我想这是他们的交易方式，或者我应该说隐藏项目的左右边界。

ionic - list比容器略大

1 个答案: