右侧的角度设计材料 md-list-item答案

【问题标题】：angular design material md-list-item in the right右侧的角度设计材料 md-list-item
【发布时间】：2015-06-13 00:01:28
【问题描述】：

根据例子：https://material.angularjs.org/#/demo/material.components.list

复选框右对齐：

在我的代码中发生的情况是复选框出现在文本下方：

我不知道为什么结果不同，因为我复制粘贴了示例，我只是将 ng-repeat 从 4 个元素更改为 2 个元素。

我的密码笔：http://codepen.io/anon/pen/wBbREV

<md-list>
    <md-subheader class="md-no-sticky">md-list</md-subheader>

   <md-list-item>
        <p> title </p>
        <md-checkbox class="md-secondary"></md-checkbox>
    </md-list-item>

    <md-list-item>
        <p> title </p>
        <md-checkbox class="md-secondary"></md-checkbox>
    </md-list-item>
</mdlist>

【问题讨论】：

标签： css angularjs material-design angular-material

【解决方案1】：

要在同一行上，只需像这样对齐布局，

<md-list-item layout="row">

这是更新后的Version

【讨论】：

感谢您的回答，但复选框并不完全位于屏幕右侧，如 angular-material 示例所示

【解决方案2】：

实际上对 css 的更改可以解决您遇到的问题：

如果你使用开发版：

https://rawgit.com/angular/bower-material/master/angular-material.min.css

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
  <meta name="viewport" content="initial-scale=1" />
</head>

您的页面复选框应该对齐。

http://codepen.io/anon/pen/MYdLam

【讨论】：

【解决方案3】：

我认为我谈话迟到了，但分享我的答案使用 <md-list-item layout="row"> 并在你的 p 元素之后使用 <span flex></span> 确保您的 md-list-item 采用 100% 宽度

【讨论】：