如何在标题页中显示与其他 div 在同一行中的 div答案

【问题标题】：How to display a div in the same line as other divs in the header page如何在标题页中显示与其他 div 在同一行中的 div
【发布时间】：2015-11-07 01:02:56
【问题描述】：

我想在页面右侧的页眉部分显示第 3 个 div，并与其余 2 个 div 在同一行。

第 1 格 - 徽标

第二个 div - 搜索框

第三格 - 登录/注册

第一个两个 div 是内联的，但第三个 div 与页面的上边距对齐。

我尝试了以下 CSS

body{
    margin: auto;
    width: 1000px;
    font-family: Verdana;
}

header{
    text-align: center;
}

.logo{
    margin-right: 150px;
    float: left;
}

.anonymous-customer-header{
    margin-top: 20px;
}

#search{
    margin:0 auto;
    margin-right: 150px;
    margin-top: 35px;
    float: left;
}

HTML

<header>
    <div class="logo">
        <a href="/">
            <h1>Easy Grocers</h1>
        </a>
    </div>

    <div id="search">
        <form method="GET" action="/search">
            <input type="search" class="search" name="q" value="" />
            <input type="submit" id="search_button" value="go" />
        </form>
    </div>

    <div class="anonymous-customer-header">
        <a href="/">
            <span>Login</span>
        </a>
        &nbsp;|&nbsp;
        <a href="/">
            <span>Register</span>
        </a>
        &nbsp;|&nbsp;

        <span class="cart_items">
            <span class="cart_items_count"><img src="/"/> 0</span>
            <span class="cart_items_countWord">Items</span>
        </span>                
    </div>
</header>

DEMO

附注：

我提到了一些解决类似问题的问题，但找不到任何解决方案。

【问题讨论】：

你错过了“。”对于 CSS 代码中的类。检查此 jsfiddle.net/aucex9fn/5
是的，刚刚检查过了，愚蠢的错误.. :(

标签： html css

【解决方案1】：

我不知道您的实际 css 是否错误 - 但在小提琴中您错过了 .在匿名客户标头的开头。但是，您在上面的 css 中是正确的！

看看这个小提琴似乎工作正常：

https://jsfiddle.net/aucex9fn/7/

.anonymous-customer-header{
    float:right;
    margin-top: 30px;
}

【讨论】：

【解决方案2】：

我更新了你的JSFIDDLE。现在，首先为您的anonymous-customer-header 班级，您忘记了. 将其表示为一个班级。其次，您的margin-top 是错误的。不过，这一切都在你的小提琴中为你更新了，但如果你想要你的 CSS，它就在这里：

body {
    margin: auto;
    width: 1000px;
    font-family: Verdana;
}
header {
    text-align: center;
}
.logo {
    float: left;
}
#search {
    margin-left: 150px;
    float:left;
    margin-top: 30px;
}
.anonymous-customer-header {
    float:right;
    margin-top: 30px;
}

【讨论】：

"float:right" 在这里确实有所作为。谢谢。