如何在父div的右侧定位div

Question

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

＆＃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{
        position: absolute;
        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;

Answer 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;

Answer 2

您可以使用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;

Answer 3

您只需要修改：

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

到

#upper_right_menu{
    position: absolute;
    right: 0;
    top: 0;
}

Answer 4

这是我的解决方案

#upper_right_menu{
    position: absolute;
    top: 0px;
    right: 0px;
}

Answer 5

尝试起诉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;