Question

我正在尝试将容器置于CardView中心。为了使用Angular Material，我使用layout = column和layout-align = center center。但是layout = column会在子容器视图的左侧和右侧添加不必要的填充，如GREEN容器内所示。

如何摆脱layout = column引入的填充，并将子容器集中在CardView中？

               <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。

layout = column添加不必要的填充

1 个答案: