Question

我想在页眉右侧显示标题部分中的第3个div，与剩余的2个div显示在同一行。

1st div- Logo

第二个div - SearchBox

第3个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

P.S：

我提到了一些解决类似问题的问题，但无法找到解决方案。

Answer 1

我更新了您的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;
}

Answer 2

我不知道你的实际css是不是错了 - 但是你错过了。在anonymous-customer-header的开头。但是，你在上面的css中说得对！

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

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

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

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

2 个答案: