1

这是我的 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 中一样）

我真的需要使用浮点数才能正确对齐吗？

4

4 回答 4

2

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

于 2013-01-27T00:04:15.323 回答
0

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

于 2013-01-27T00:02:48.267 回答
0

浮动是（在我看来）使块元素正确对齐的最一致的方式。或者，尽管您可以使用position:absolute;andright: 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/

于 2013-01-27T00:08:45.123 回答
-1

您可以通过 z-index 使用 css 定义 z 位置

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

我弄错了。

float:left;

对于标题和

margin-top:20px;

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

于 2013-01-27T00:03:06.133 回答