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

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

问题是您使用了 <h1>元素。这将跨越顶部的整个宽度(请参阅 here )，以便所有其他元素都将放置在它下面。使用 <span>相反，并根据您的需要设计它。使用 position-absolute正如羊驼的嘴唇 nao 所建议的那样也可能有效。