无法在html文件中对齐两个元素(fail to align two elements in html file)

无法在html文件中对齐两个元素(fail to align two elements in html file)

我有两个按钮，我想排列在同一行中，出于某种原因，第二个按钮位于第一个按钮之下。

我认为将它们分组在一个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.