html - 同一行父级内同一行的两个 div

Question

所以，我进行了搜索，似乎每个问过这个完全相同问题的人实际上都成功地得到了某人给出的答案——我尝试了多种不同的方法，老实说，我快要崩溃了。

我试过向左浮动、向右浮动、内联 block 等，但似乎没有有效。我不知道自己做错了什么，但这让我抓狂。

这是我试图在同一行上获取的 HTML:

<div class="search-and-staff-app-button">
   <div class="search-position">
     <form method="get" id="sb_searchform" action="<?php bloginfo('home'); ?>/">
       <div class='search-box'>
         <input name="s" id="s" class='search-input' placeholder='Search' type='text' />
         <img onclick="document.getElementById('sb_searchform').submit();" class='search-img' src='<?php bloginfo('template_url'); ?>/img/search.png'>
       </div>
     </form>
   </div>

   <div id="staffAppButtonPlaceholder" class="staff-app-position"></div>

</div>

和CSS:

.search-and-staff-app-button {
    width:360px;
    margin:0px;
    float:right;
    display: inline-block;
}

.search-position {
    float:left;
}

.staff-app-position {
    float:left;
}

我做错了什么？我试过了 Getting 2 divs on the same line这也不起作用。

如有任何帮助，我们将不胜感激!

-斯图

Answer 1

要将 search-position 和 staffAppButtonPlaceholder div 放在同一行，首先 float search-position div:

.search-position {
    float: left;
}

然后在占位符中添加一些内容:

<div id="staffAppButtonPlaceholder" class="staff-app-position">Content</div>

最后，增加包含的 div 的宽度以允许元素并排放置:

.search-and-staff-app-button {
    width:760px;

两个 div 现在将水平对齐。

http://jsfiddle.net/jzefu2j9/1/