Question

所以，我做了一次搜索，似乎每个人都问过这个完全相同的问题实际上是否有人给出了答案 - 我尝试了多种不同的方法，老实说，我是即将崩溃。

我尝试过左移，右移，内联阻止等，而 none 似乎有效。我不知道自己做错了什么，但它让我疯了。

这是我尝试上同一行的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，但这也无效。

任何帮助都会受到超级赞赏！

-Stu

Answer 1

要将search-position和staffAppButtonPlaceholder div放在同一行，请先浮动搜索位置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/

Answer 2

这是一个小例子，也许它会对你有帮助。我使用的是flexbox，在我看来这是一个很好的对齐方法。

.search-and-staff-app-button{
  display: flex;
  background:red;
  align-items:center;
}
.search-and-staff-app-button > div{
  box-sizing:border-box;
  display:block;
  flex:1 50%;
  align-self:center;
  padding:1em;
}

http://jsfiddle.net/pulamc/u9nLwacs/

Answer 3

添加style =＆＃34; position：relative＆＃34;你的外部div。然后使内部div的风格=＆＃34;位置：绝对;左：0＆＃34;。您必须手动为每个div设置左值。缺点是你必须知道同一行上其他div的宽度。

同一行中父级内同一行上的两个div

3 个答案: