javascript - 如何将div放置在父div的右侧

嘿，我有一个小导航栏，该导航栏分为2部分：左侧部分和右侧部分。
左侧部分包含一个箭头图标，右侧部分应包含2个图标：信封和感叹号三角形。我试图将右边的部分放在导航栏的右上角（这是一个div）。到目前为止没有成功，我将添加以下代码：

.arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
        position: absolute;
        float:right;
        margin:0px;
        padding:0px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>

最佳答案

从ID #upper_right_menu中删除绝对定位样式元素

.arrow {
	    color: gray;
	    font: bold 11px "Helvetica";
	    padding: 2px;
	    text-decoration: none;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .arrow:after {
	    background: gray;
	    color: #FFF;
	    content: ">";
	    display: inline-block;
	    font: bold 11px "Georgia";
	    height: 25px;
	    line-height: 25px;
	    margin-left: 2px;
	    text-align: center;
	    width: 25px;
	    -webkit-border-radius: 20px;
	    -moz-border-radius: 20px;
	    border-radius: 20px;
    }

    .upper_menu{
        position:relative;
        display:block;
        background-color: #F2F6F7;
        width: 100%;
        height: 20%;
    }

    #upper_right_menu{
        float:right;
        margin:0px;
        padding:0px;
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <a href="#" class="arrow"></a>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i class="exclamation-triangle fa fa-exclamation-triangle"></i></a>
        <a href="#" class="email"><i class="envelope fa fa-envelope-o"></i></a>
    </div>
</nav>