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