我怎样才能在顶部获得搜索(向右浮动)

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） 和 or 负边距。

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/（上边距添加）

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 通过 z-index 定义 z 位置

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

我弄错了。

float:left;

对于标题和

margin-top:20px;

是您想要的解决方案，因此其他答案是正确的。