css - ionic - 列表比容器稍大

Question

我正在开发一款 ionic 应用。

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

一开始以为跟边界有关，其实不是。

我知道这不会破坏交易，但它对我来说确实很奇怪，我希望这个列表看起来不错并且包含在容器中而不退出(即使它只有几个像素)

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

如果仔细观察，您会发现连接设置列表分隔线下方的所有内容都在外面。

我使用的代码是 ionic 文档中的一个简单列表:

<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;
}

虽然我不知道为什么会这样。这是 ionic 基本CSS。我想这是他们的交易方式，或者我应该说隐藏元素的左右边框。