搜索字段与文本不在同一行

Question

我正在尝试在我的标题（黑区）中插入搜索字段但不起作用。我希望搜索字段内嵌“SimpleCMS”...

请参阅此屏幕截图以了解：

我希望它与标题文本在同一行...

我的HTML代码：

<div id="header"><h1><?php echo($header_text); ?></h1>
    <div style="float: right;">
        <form action="search.php" method="get">
            <input type="text" name="q" id="q" value="Search..." />
            <input type="submit" value="Search" />
        </form>
    </div>
</div>

我的CSS：

#header
{
    padding: 5px 10px;
    background: #000;
    color: #FFF;
    text-align: left;
}

Answer 1

更新：使用position: absolute;

#header
{
    padding: 5px 10px;
    background: #000;
    color: #FFF;
    text-align: left;
    position: relative;
}
#header div form {
    position: absolute;
    top: 75px;
    right: 25px;
}

Answer 2

问题是您使用<h1>元素。这将跨越顶部的整个宽度（参见here），以便将其他所有元素放置在其下方。请改用<span>并根据您的需要设置样式。使用position-absolute作为羊驼嘴唇nao建议可能也有效。