Question

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

复选框右对齐： Example Image

我的代码中发生的是复选框显示在文本下方： My result Image

我不知道为什么结果会有所不同，因为我复制了粘贴示例，我刚刚将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％宽度

角设计材料md-list-item在右边

3 个答案: