问题在同一行左右对齐元素

Question

我目前有两个div，我想要在左右两侧浮动，但是他们都有点相互粘贴而且不能分开它们。

HTML：

<nav>
        <div id="nav_content">
            <div id="home_icon" />
            <div id="search_icon" />
        </div> 
   </nav>

所以我试图将home_icon浮动到左边，将search_icon浮动到右边：

CSS

    nav
{
    background:white no-repeat;
    width:75%;
    height:5em;
    margin-left:8em;
}
#nav_content
{
    width:100%;
    height:100%;
    clear:both;
    position:relative;
    display:inline-block;
    float:left;
}
#home_icon
{
    background:url(../images/home.png) no-repeat;
    width:50px;
    height:50px;
    top:50%;
    position:relative;
    transform: translateY(-50%);
    transition:ease-in-out 0.5s;
    margin-left:1em;
    float:left;
    display:inline-block;
}

#search_icon
{
    background:url(../images/searchicon.png) no-repeat;
    width:40px;
    height:40px;
    top:50%;
    transform:translateY(-50%);
    transition:ease-in-out 0.5s;
    float:right;
    display:inline-block;
    position:relative;


}

Answer 1

你无法做到

<div id="home_icon" />
<div id="search_icon" />

HTML中的

5.因为它与

相同

<div id="home_icon">
<div id="search_icon">

这使浏览器认为#search_icon位于#home_icon内。

因此，要么将DocType设置为XHTML，要么正确关闭div。

相关问题 - Are (non-void) self-closing tags valid in HTML5?
jsFiddle - http://jsfiddle.net/9vd01zx5/

Answer 2

您使用了错误的HTML结束标记

使用：

<div id="home_icon">Left</div>
<div id="search_icon">Right</div>

稍后左右删除文字..