3

根据示例：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>
4

3 回答 3

4

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

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

这是更新的Version

于 2015-04-08T06:54:51.573 回答
4

实际上，对 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

于 2015-04-08T07:33:48.797 回答
0

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

于 2016-10-18T05:56:06.687 回答