无法将元素置于 div 内

Question

我在 div 中包含三个元素。我想将一个放在左边，一个在中间，最后一个在右边。我尝试了以下方法：

    .search-form {
        float: right; 
    }

 .menu_icon:before {
    content:url(/sites/all/themes/mytheme/images/hamburger.png);
}

.main_logo {
  margin: 0% auto;
}

.main_logo:before {
    content:url(/sites/all/themes/mytheme/images/logop.png);
}
    .menu_icon {
       float: left;
    }

    <div class="fixed"> 
     <div class="fixed-container">
      <a href="#menu" title="Menu" class="menu_icon"> </a>
       
      <form action="/search/node" method="post" id="search-form" class="search-form">
       <div class="form-item">
         <input type="text" class="input-text" value="Search the website" onFocus="this.value=''" onBlur="if(this.value=='') this.value='Search the website';" size="25" name="keys" />
         <input type="submit" value="" name="op" alt="Search" />
         <input type="hidden" value="<?php print drupal_get_token('search_form'); ?>" name="form_token" />
         <input type="hidden" value="search_form" id="edit-search-form" name="form_id" />
         <input type="hidden" name="type[your_content_type]" id="edit-type-your_content_type" value="your_content_type" />
       </div>
     </form>

     <a href="/" title="Home page" rel="home" class="main_logo"> </a>
     </div>
    </div>

我还尝试在 dividually 中将这些元素包装在 div 中，并将样式应用于那些 div 而不是元素。但徽标始终贴在菜单图标上，从下面的代码片段中可以看出。为什么它不起作用？

Answer 1

目前您的 a 显示为内联，这使得它无法作为一个块居中。

此外，display:block 不能单独与 margin:0 auto 一起使用，因为方块的宽度为 100%。您还需要一个给定的宽度才能工作。

.first {
    float:right;background:red;
}
.second{
    float:left;background:blue;
}
.third{
    margin:0% auto;background:gold;
    display:block;width:10em;
    /*Unnecessary but may be added*/text-align:center;
}

<div class="fixed"> 
    <div class="fixed-container">
        <span class="first">First</span>
     <div class="second">Second</div>
     <span class="third">Third</span>
    </div>
</div>

无法将元素置于 div 内

Can't center an element inside div

html

css

css-position