html - 无法对齐 html 文件中的两个元素

Question

我有两个按钮，我想将它们对齐在同一行，但由于某种原因，第二个按钮在第一个按钮的下方...

我认为将它们分组在一个 div 中会有所帮助。

这是我当前的 html，我尝试将 <md-switch> 分组可能有些困难与 <button> .

<div>
    <button md-button (click)="publish()" class="md-primary">Update</button>
    <md-switch [(checked)]="data.cb1">Sho: {{ data.cb1 }}</md-switch>
</div>

如果我向它添加一个样式属性，只有按钮有反应，所以显然 md-switch 发生了一些事情。

Answer 1

<md-switch>是 directive并且没有按钮。所以 HTML 将被 angular 替换/解析(我认为)输出一个 block 级元素。
解决方案是使用 display: inline-block;或 float: left; .
display: inline-block;更容易，但会为您的元素添加 1px 边距。对于 float <button>必须是 display: block; ，也是。