文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >layout=column添加不必要的填充

问layout=column添加不必要的填充
EN

Stack Overflow用户
提问于 2017-02-25 01:24:32
回答 1查看 32关注 0票数 0

我正在尝试在CardView中居中放置一个容器。为了使用角度材质，我使用了layout=column和layout-align=center center。但是，layout=column在子视图的左侧和右侧添加了不必要的填充，如绿色容器内所示。

如何去掉layout=column引入的填充，并将子容器也放在CardView中？

代码语言：javascript
复制
               <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>

截图：

​

mean-stack
html
angularjs
node.js
angular-material
EN

回答 1

Stack Overflow用户

发布于 2017-02-25 01:41:15

对于头部和内容，应该使用md-card-header和md-card-content。这样，您就可以删除这些额外的div标记。

代码语言：javascript
复制
<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。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/42444714

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档