Html 右对齐的元素不在一条线上

我想在左边放置一些元素，在右边放置一些元素。但是右边的元素并没有保持在线，特别是在添加了mat form字段之后。我得到：

在右侧，右按钮和图标位于同一行上，但mat form字段与它们不在同一行上

我的html是：

<div class="mat-table-container">
    <div class="mat-table-button-wrapper">
        <div id="left-aligned-wrapper">
            <button class="btn btn-primary"> 
                Left Button
            </button>
        </div>
        <div id="right-aligned-wrapper">
            <mat-form-field appearance="standard">
              <input matInput placeholder="Placeholder">
            </mat-form-field>
            <button type="button" mat-button>
              Right Button
            </button>
            <button class="btn btn-default">
              <i class="my-icon my-icon-filter"></span>
            </button>
        </div>
    </div>
</div>

---

这里会出什么问题？

在这种情况下，我建议您使用

flexbox

而不是

float

这将导致您的CSS看起来像这样：

.mat-table-container {
  position: relative;
  .mat-table-button-wrapper {
    height: 50px;
    padding-left: 0em;
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
  }
}

i、 e.删除对包装类应用

display:flex

，并使用

justify content:space-between

相应地为内容留出空间

---

这还可以确保您的内容不会跳转到下一行。

在这种情况下，我建议您使用

flexbox

而不是

float

这将导致您的CSS看起来像这样：

.mat-table-container {
  position: relative;
  .mat-table-button-wrapper {
    height: 50px;
    padding-left: 0em;
    padding-top: 1em;
    display: flex;
    justify-content: space-between;
  }
}

i、 e.删除对包装类应用

display:flex

，并使用

justify content:space-between

相应地为内容留出空间

---

这也将确保您的内容不会跳转到下一行。

请在两个元素中应用宽度：50%。 或者使用display:flex属性

.mat-table-button-wrapper {
  display: flex;
  align-item: center;
  justify-content: space-between;
}

---

请在两个元素中应用宽度：50%。 或者使用display:flex属性

.mat-table-button-wrapper {
  display: flex;
  align-item: center;
  justify-content: space-between;
}

---

在

mat表单字段上有一些上边距

？我复制并粘贴了您的代码-它工作正常。垫子表单字段和右按钮位于正确位置。检查开发人员工具是否有其他css应用于这些字段中的任何一个。@Hemendra

width:auto

在mat-form字段中使右侧元素现在位于同一行。但是在slackblitz演示中，您可以看到右侧元素比左侧元素位于较低的一侧。为什么会这样？我得到了一个问题，右边是较低的位置。你在左对齐和右对齐的div中使用不同的控件，每当有来自两个不同库的控件时，都会出现这种情况。左一个是简单的HTML按钮（左按钮），右一个是mat表单字段。mat form字段在DOM中扩展对象并应用它自己的CSS。如果您不想应用mat form field CSS，可以使用ViewEncapsulation，请阅读此处-

mat form field

上的一些上边距？我将您的代码复制粘贴到此处-，它工作正常。垫子表单字段和右按钮位于正确位置。检查开发人员工具是否有其他css应用于这些字段中的任何一个。@Hemendra

width:auto

在mat-form字段中使右侧元素现在位于同一行。但是在slackblitz演示中，您可以看到右侧元素比左侧元素位于较低的一侧。为什么会这样？我得到了一个问题，右边是较低的位置。你在左对齐和右对齐的div中使用不同的控件，每当有来自两个不同库的控件时，都会出现这种情况。左一个是简单的HTML按钮（左按钮），右一个是mat表单字段。mat form字段在DOM中扩展对象并应用它自己的CSS。如果您不想应用mat表单字段CSS，可以使用viewcapsulation，请阅读此处-