我有两个按钮,我想排列在同一行中,出于某种原因,第二个按钮位于第一个按钮之下。
我认为将它们分组在一个div中会有所帮助。
这是我目前的html,我尝试用<button>分组<md-switch>可能有些困难。
<div> <button md-button (click)="publish()" class="md-primary">Update</button> <md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch> </div>如果我为它添加一个样式属性,只有按钮会起作用,所以显然md-switch正在发生一些事情。
I have two buttons that I want to align to be in the same line, and for some reason the second one is below the first one...
I thought grouping them in one div will help.
this is my current html, there is probably some difficulty with my attempt to group <md-switch> with <button>.
<div> <button md-button (click)="publish()" class="md-primary">Update</button> <md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch> </div>If I am adding a style attribute to it, only the button reacts, so obviously something is going on with the md-switch.
最满意答案
<md-switch>是一个directive ,没有按钮。 所以HTML将被angular替换/解析(我认为)会输出块级元素。 解决方案是使用display: inline-block; 或float: left; 。 display: inline-block; 更容易,但会为您的元素添加1px的边距。 对于浮点数, <button>必须是display: block; 也是。
<md-switch> is a directive and no button. So the HTML will be replaced/parsed by angular which (as I think) outputs a block-level element. Solutions for that would be to use either display: inline-block; or float: left;. display: inline-block; is easier but will add 1px margin to your elements. For floats the <button> has to be display: block;, too.
更多推荐
发布评论