layout =不要な詰め物を追加する列

Question

私は、CardViewの内側にコンテナを集中させようとしています。角度材料を使うために、私はlayout = columnとlayout-align = center centerを使っています。ただし、layout = columnは、GREENコンテナの内側に表示されているように、子ビューの左右に不必要な埋め込みを追加します。

レイアウトによって導入されたこのパディングを取り除くにはどうすればよいのですか？

   <md-card flex="35"> 
        <div class="wingoku-accounts-card-title"> 
         <span class="md-headline">Parents Info</span> 
        </div> 

        <div class="wingoku-accounts-div-padding" style="background: green" flex="100" layout="column" layout-align="center center"> 
         <div layout="column" layout-align="center center" flex="100" style="background: red"> 
          <div layout="column" layout-align="center center" style="background: yellow"> 
           <div layout="row" layout-align="center center" flex="100"> 
            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Father First Name" 
               ng-model="fatherFirstName" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 

            <span flex="10"></span> 

            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Father Last Name" 
               ng-model="fatherLastName" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 
           </div> 

           <div layout="row" layout-align="center center" flex="100"> 
            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Mother First Name" 
               ng-model="motherFirstName" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 

            <span flex="10"></span> 

            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Mother Last Name" 
               ng-model="motherLastName" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 
           </div> 

           <div layout="row" layout-align="center center" flex="100"> 
            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Guardian Name" 
               ng-model="guardianName" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 

            <span flex="10"></span> 

            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Guardian ID Card" 
               ng-model="guardianIDCardNum" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 
           </div> 

           <div layout="row" layout-align="center center" flex="100"> 
            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Father ID Card" 
               ng-model="fatherIDCardNum" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 

            <span flex="10"></span> 

            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Mother ID Card" 
               ng-model="motherIDCardNum" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 
           </div> 

           <div layout="row" layout-align="center center" flex="100"> 
            <md-input-container class="md-block" flex="40"> 
             <input required type="text" placeholder="Parent's Email Address" 
               ng-model="emailAddress" 
               enter-pressed=""/> 

             <div ng-messages="$error"> 
              <div ng-message="required">This is required.</div> 
             </div> 
            </md-input-container> 
           </div> 
          </div> 
         </div> 
        </div> 
       </md-card> 

スクリーンショット：

Answer 1

あなたは、ヘッダとコンテンツのmd-card-headerとmd-card-contentを使用する必要があります。この方法で、この余分なdivタグを削除することができます。ここで

<md-card flex="35"> 
<md-card-header> 
    <md-card-header-tex> 
     Parents Info 
    </md-card-header-tex> 
</md-card-header> 

<md-card-content style="background: green"> 
    <!--  <div class="wingoku-accounts-div-padding" style="background: green" flex="100" layout="column"> --> 
    <!--   <div layout="column" layout-align="center start" flex="100" style="background: red"> --> 
    <!--   <div layout="column" style="background: yellow"> --> 
    <div layout="row" layout-align="center center" flex="100"> 
    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Father First Name" ng-model="fatherFirstName" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 

    <span flex="10"></span> 

    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Father Last Name" ng-model="fatherLastName" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 

    <div layout="row" layout-align="center center" flex="100"> 
    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Mother First Name" ng-model="motherFirstName" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 

    <span flex="10"></span> 

    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Mother Last Name" ng-model="motherLastName" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 

    <div layout="row" layout-align="center center" flex="100"> 
    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Guardian Name" ng-model="guardianName" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 

    <span flex="10"></span> 

    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Guardian ID Card" ng-model="guardianIDCardNum" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 

    <div layout="row" layout-align="center center" flex="100"> 
    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Father ID Card" ng-model="fatherIDCardNum" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 

    <span flex="10"></span> 

    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Mother ID Card" ng-model="motherIDCardNum" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 

    <div layout="row" layout-align="center center" flex="100"> 
    <md-input-container class="md-block" flex="40"> 
     <input required type="text" placeholder="Parent's Email Address" ng-model="emailAddress" enter-pressed="" /> 

     <div ng-messages="$error"> 
     <div ng-message="required">This is required.</div> 
     </div> 
    </md-input-container> 
    </div> 
    <!--   </div> --> 
    <!--   </div> --> 
    <!--  </div> --> 
</md-card-content> 

は作業codepenです。