ионный - список немного больше контейнера

Question

Я работаю над ионным приложением.

Я только что заметил, что список, который я использую, немного больше, чем контейнер.

Сначала, хотя это было связано с границей, но это не так.

Я знаю, что это не дело выключатель, но это выглядит странно для меня, и я хотел бы этот список, как хорошо выглядеть и содержащиеся в контейнере без выхода (даже если это всего лишь несколько пикселей)

вы можете увидеть пример здесь: http://codepen.io/NickHG/pen/VaogjL

Если присмотреться, то можно увидеть, что все под связи заходящего список делитель находится вне.

кода я использую простой список из ионного Docs:

<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. Я предполагаю, что это их способ борьбы или я должен сказать, что скрываю левую и правую границу предмета.