angular 设计material md-list-item 在右边

Question

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

复选框正确对齐：

在我的代码中，复选框出现在文本下方：

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

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

Answer 1

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

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

这是更新后的 Version

Answer 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

Answer 3

我想我来晚了，但分享我的答案使用 <md-list-item layout="row"> 并在 p 元素之后使用 <span flex></span> 确保您的 md-list-item 占用 100% 宽度

angular 设计material md-list-item 在右边

angular design material md-list-item in the right

css

angularjs

material-design

angular-material