Question

这是我的jsfiddle（带结果）。 http://jsfiddle.net/76kmL/2/

CSS

header {
    background: red;
    color: #FFFFFF;
    padding: 18px;
    height: 110px;
}

#search {
    float: right;
}

HTML

<div id="container">
    <header>
        <a href="#"><h1>Code Name</h1></a>
        <div id="search">
            <form method="post" action="#">
                <input type="text" name="search" value="" placeholder="Search">
                <input type="submit" name="submit" value="Search">
            </form>
        </div>
    </header>

如何让搜索栏与标题标题对齐？（并不低于它，就像在jsfiddle中一样）

我是否真的需要使用浮动才能使其正确对齐？

Answer 1

你不必使用花车。你有很多选择。一个人正在使用display:inline-block，就像这样http://jsfiddle.net/jalbertbowdenii/76kmL/4/你也可以使用position：（ing）和/或者是负边距。

Answer 2

在标题中添加float:left;：<a href="#" style="float:left;"><h1>Code Name</h1></a>

    <div id="container">
        <header>
            <a href="#" style="float:left;"><h1>Code Name</h1></a>
            <div id="search">
                <form method="post" action="#">
                    <input type="text" name="search" value="" placeholder="Search">
                    <input type="submit" name="submit" value="Search">
                </form>
            </div>
        </header>

如果您想降低搜索输入，请在搜索栏上使用margin-top:20px;。

检查http://jsfiddle.net/CtRBz/

相同行：http://jsfiddle.net/WjSvG/（已添加margin-top）

Answer 3

浮点数（在我看来）是使块元素右对齐的最一致方式。或者，您可以使用position:absolute;和right: 0;向右对齐，但这会带来一系列问题。

要垂直对齐标题，您有两个选择：

将标题浮动到左侧
使用负上边距。

使用负上边距的示例：

   header {
    background: red;
    color: #FFFFFF;
    padding: 18px;
    height: 110px;
}

#search {
    float: right;
    margin-top:-20px;
}

HTML：

<div id="container">
    <header>
        <a href="#"><h1>Code Name</h1></a>
        <div id="search">
            <form method="post" action="#">
                <input type="text" name="search" value="" placeholder="Search">
                <input type="submit" name="submit" value="Search">
            </form>
        </div>
    </header>

JsFiddle示例：http://jsfiddle.net/LR2LY/1/

修改

使用标题上的左浮动替代CSS，而不是使用负上边距。相同的HTML适用：

h1 {font-size:30px; } #container header a { display:block; float:left; } header { background: red; color: #FFFFFF; padding: 18px; height: 110px; } #search { float: right; }

JsFiddle：http://jsfiddle.net/LR2LY/2/

Answer 4

您可以使用css by z-index

定义z位置

#search {
    float: right;
    z-index:99;
}

我弄错了。

float:left;

标题和

margin-top:20px;

是你想要的解决方案，所以其他答案是正确的。

如何在顶部进行搜索（向右浮动）

4 个答案: