html - 浮动 div 与标题内联

Question

我试图浮动一个带有几个按钮的 div 内联，但是 div 被按下，并显示在旁边

由于我似乎无法理解的原因，即使在 div 中也没有。这是html：

<div>
    <h1 style="width:50%">Query Results</h1>
    <div id="np-results">
        <button>Prev</button>
        <button>Next</button>
    </div>
</div>

以及 np-results 的 css：

#np-results{
    float:right;
    width:100px;
    height:auto;
    border-radius: 4px;
    border: solid #4297d7 1px;
    background-color: #fcfdfd;
    margin: 2px;
}

那么我做错了什么，不允许 div 与 h1 内联浮动？感谢您的帮助！

Answer 1

问题是它们默认都是显示块。给他们两种css风格display: inline;

工作演示http://jsfiddle.net/A33nM/

h1 {
    display: inline;
}

#np-results{
    display: inline;
}

或者你可以像 Josh Crozier 所说的那样将 h1 向左浮动。

http://jsfiddle.net/A33nM/1/

h1 { float: left; }