如何在父div的右侧定位div

时间:2016-03-06 11:16:38

标签: javascript jquery html css twitter-bootstrap

嘿我有一个小导航栏,分为两部分:左侧部分和右侧部分。 左侧部分包含一个箭头图标,右侧部分应包含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;
&#13;
&#13;

5 个答案:

答案 0 :(得分:1)

从id #upper_right_menu

中删除绝对定位样式元素

&#13;
&#13;
.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;
&#13;
&#13;

答案 1 :(得分:1)

您可以使用CSS flexible boxes,只需从导航栏中删除position:relative; .upper_menu

查看此实时演示

&#13;
&#13;
.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;
&#13;
&#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;解决方案

&#13;
&#13;
.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;
&#13;
&#13;