嘿,我有一个小导航栏,它被分成两部分:左部分和右部分。 左侧部分包含一个箭头图标,右侧部分应包含2个图标:envelope &感叹号三角形。我试图将右侧部分放置在导航栏的右侧(这是一个div)。到目前为止,还没有成功,我加入下面的代码:如何将div放在父div的右侧
.arrow {
\t color: gray;
\t font: bold 11px "Helvetica";
\t padding: 2px;
\t text-decoration: none;
\t -webkit-border-radius: 20px;
\t -moz-border-radius: 20px;
\t border-radius: 20px;
}
.arrow:after {
\t background: gray;
\t color: #FFF;
\t content: ">";
\t display: inline-block;
\t font: bold 11px "Georgia";
\t height: 25px;
\t line-height: 25px;
\t margin-left: 2px;
\t text-align: center;
\t width: 25px;
\t -webkit-border-radius: 20px;
\t -moz-border-radius: 20px;
\t 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>
你试过文档中的'push'和'pull'辅助类? –