Question

我有以下非常简单的布局：Inline search and logout button

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

HTML：

<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>

CSS：

.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;
}

我已经尽力了但是由于某种原因，se仍然显示如附图所示。

Answer 1

由于您忘记将display: inline-block添加到.search，因此未对齐使其成为内联块将使其与其他内联或内联块元素水平对齐。

此外，您不再需要margin: 0 auto;了。定位它使用其他技术。

我创建了一个代码here

的小提琴

<强>更新

.nav-bar不应具有display: inline-block属性。它必须作为块保留为搜索表单和按钮的全宽容器。

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

要在右上角找到退出按钮，请使用position: absolute;

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

Updated fiddle

Answer 2

我假设您正试图让所有内容排在标题中 - 尝试在.logout DIV上使用绝对定位。例如here ..如果您想要退出＆＃39;如屏幕截图所示，按钮位于标题底部附近，然后只需增加顶部＆＃39;定位。

css显示内联和浮动不起作用

2 个答案: