Question

我的问题是为什么这些元素不是分开的，因为假设左边和右边有一些边距。如果我想在移动设备上看到这些元素，那将会是一团糟。所以我在这里缺少的是为了正确地分离元素而不是混合在一起。

注意：嘿，这里是我所拥有的以下代码，并在代码点击链接后查看图像。

<md-list-item layout="row">
          <img  ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
          <p flex ng-bind="c.username"></p>
          <p flex ng-bind="c.email"></p>

          <md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
           <md-icon class="md-hue-1" md-svg-icon="assets/img/plus1.svg"  
           aria-label="Add Contact">
           </md-icon>
          </md-button>

          <md-button flex class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
           <md-icon md-svg-icon="assets/img/message.svg"  
           aria-label="Send Email" 
           class="md-secondary" >
           </md-icon>
          </md-button>

        </md-list-item>

this is the picture of the md-list-item

Answer 1

我认为这是因为您在第二个class="md-secondary"上有md-icon。如果您将其删除（或将class="md-hue-1"替换为另一个md-icon），则可以正常使用 - CodePen

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
  <md-list-item layout="row">
    <img  ng-src="assets/img/iconUser.png" class="md-avatar" alt="none"/>
    <p flex>John</p>
    <p flex>john.smith@gmail.com</p>

    <md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Add Contact">
      <md-icon class="md-hue-1"  md-svg-src="img/icons/cake.svg" aria-label="Add Contact"></md-icon>
    </md-button>
    <md-button class="md-secondary md-icon-button md-button md-ink-ripple" aria-label="Send Email">
      <md-icon class="md-hue-1" md-svg-src="img/icons/android.svg" aria-label="Send Email"></md-icon>
    </md-button>

  </md-list-item>
</div>

如何分隔标签<md-list-item>中的图标？

1 个答案: