嘿我有一个小导航栏,分为两部分:左侧部分和右侧部分。 左侧部分包含一个箭头图标,右侧部分应包含2个图标:envelope&感叹号三角形。我试图将右侧部分放在导航栏的右角(这是一个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>
&#13;
答案 0 :(得分:1)
从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;
}
&#13;
<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>
&#13;
答案 1 :(得分:1)
您可以使用CSS flexible boxes,只需从导航栏中删除position:relative;
.upper_menu
查看此实时演示
.arrow {
color: gray;
font: bold 11px "Helvetica";
padding: 2px;
text-decoration: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
nav{
}
.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: flex;
justify-content: space-between;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu {
margin: 0px;
padding: 0px;
}
&#13;
<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>
&#13;
答案 2 :(得分:1)
您只需要修改:
#upper_right_menu{
position: absolute;
float:right;
margin:0px;
padding:0px;
}
到
#upper_right_menu{
position: absolute;
right: 0;
top: 0;
}
答案 3 :(得分:0)
这是我的解决方案
#upper_right_menu{
position: absolute;
top: 0px;
right: 0px;
}
答案 4 :(得分:0)
尝试起诉display:table;
解决方案
.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:table;
background-color: #F2F6F7;
width: 100%;
height: 20%;
}
#upper_right_menu{
display: table-cell;
vertical-align: middle;
text-align: right;
}
&#13;
<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>
&#13;