Html css显示内联和浮点不工作

我有以下非常简单的布局：

正如您所看到的，我在内联显示这些内容时遇到了问题。代码如下：

html:

我已经尽了全力，但由于某些原因，se仍显示在所附的图像中。

它没有对齐，因为您忘记将显示：内联块添加到。搜索 使其成为内联块将与其他内联或内联块元素水平对齐

此外，你不需要保证金：0自动；不再要定位它，请使用其他技术

我对你的代码进行了修改

更新

.nav栏不应具有“显示：内联块”属性。 它必须保持为块，才能成为搜索表单和按钮的全宽容器

您可以坚持使用以前的解决方案来居中.search

要将注销按钮放置在右上角，请使用位置：绝对

---

我假设你正试图让所有的东西在标题中对齐-尝试在.logout分区使用绝对定位。例如。。如果您希望“注销”按钮位于屏幕截图中标题底部附近，则只需增加“顶部”位置的值。

谢谢，这解决了一个问题。我想问一下，您对我使用哪些技术来居中搜索栏有何建议？我将在稍后更新我的答案，但我建议您阅读更多有关CSS定位、显示属性和框模型的信息–由于您的代码，您可能会在某些部分误解它

<div class="nav-bar">
<div class="search">
    <form action="" method="post">
        <input type="search" placeholder="Search here..." required>
        <input type="submit" value="Search">
    </form>
</div>
<div class="logout">
    <a href="logout.php" class="button-small">Logout</a>
</div>
</div>

.nav-bar
{
display: inline-block;
background: #607D8B;
padding: 5px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
width: 100%;
height:27px;
}

.search {
background-color: chartreuse;
width: 250px;
margin: 0 auto;
}

.logout {
display: inline-block;
float: right;
font-family:'Roboto',sans-serif;
}

.logout,
.username
{
background-color: chartreuse;
margin: 0;
padding: 0;
list-style: none;
}

.logout a,
.header-heading a
{
/*display: block;*/
padding: .7em 1em;
color: #607D8B;
text-decoration:none;
/*border-bottom: 1px solid gray;*/
font-family:'Roboto',sans-serif;
}

.logout a:link { color: #607D8B; }

.logout a:visited { color: #607D8B; }

.logout a:focus
{
color: #607D8B;
font-weight:bolder;
}

.logout a:hover
{
color: #607D8B;
font-weight:bolder;
}

.logout a:active
{
color: #607D8B;
}

.logout {
  position: absolute;
  right: 0;
  top: 5px; //As padding-top of  .nav-bar
  ...
 }