2016-03-06 493 views
0

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

+0

你试过文档中的'push'和'pull'辅助类? –

回答

1

从ID #upper_right_menu

.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{ 
 
     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>

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

0

这是我的解决方案

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

尝试起诉display:table;解决方案

.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:table; 
 
     background-color: #F2F6F7; 
 
     width: 100%; 
 
     height: 20%; 
 
    } 
 

 
    #upper_right_menu{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: right; 
 
    }
<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>

1

你只需要修改:

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

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

感谢您的快速回复。 – Brk