導航欄內的subnavbars html css

我想將登錄按鈕與設置圖標沿着來自導航欄的鏈接上方的一條線對齊。導航欄內的subnavbars html css

我該如何做到這一點？

這裏，說明正是我的問題小提琴：

和我寫的代碼：

<body> 
<div> 
<header> 

</header> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid pull-right" id="nav_login"> 
    <ul class="nav navbar-nav"> 
     <li> 
     <a href="#">Login</a> 
     </li> 
     <li> 
     <i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i> 
     </li> 
    </ul> 
    </div> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
     <li> 
      <a id="nav_processes" href="#">Processes</a> 
     </li> 
     <li> 
      <a id="nav_reports" href="#">Reports</a> 
     </li> 
     <li> 
      <a id="nav_alerts" href="#">Alerts</a> 
     </li> 
     <li> 
      <a id="nav_scheduler" href="#">Scheduler</a> 
     </li> 
     <li> 
      <a id="nav_admin" href="#">Admin</a> 
     </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
    <div class="container-fluid" id="hidden_container"> 
    <div id="processes_subnav" style="display: none;"> 
     <ul class="nav navbar-nav"> 
     <li> 
      <a href="#">Details</a> 
     </li> 
     <li> 
      <a href="#">Create</a> 
     </li> 
     </ul> 
    </div> 
    <div id="reports_subnav" style="display: none;"> 
     <ul class="nav navbar-nav"> 
     <li> 
      <a href="#">Details</a> 
     </li> 
     <li> 
      <a href="#">Assistance</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
    </nav> 
    <div> 
    </div> 

    <footer></footer> 
    </div>

CSS：

* { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.navbar-default .navbar-nav > li > a { 
color: white; 
} 

.navbar-default { 
background-color: black; 
border-color: black; 
} 

.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover { 
    color: white; 
} 

.navbar-default .navbar-nav > li > a { 
    outline: none; 
} 

#nav_login { 
    height: 10px; 
    font-size: 10px; 
} 

#settings_icon { 
    color: white; 
    font-size: 1.5em; 
}

編輯：

對不起，也許我沒有解釋自己很好，但我想登錄是旁邊的設置圖標它最初是（在右上角）

來源

2016-08-30 laker001

所以登錄和設置應了一下位置比其他所有環節上？ –

我很混淆你想達到的目標。嗯。也許創建一個img。我們都回答相同的輸出。 –

@SyamPillai確切！ – laker001

小的變化

HTML：

<ul class="nav navbar-nav right"> 
     <li> 
     <a href="#">Login</a> 
     </li> 
     <li> 
     <i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i> 
     </li> 
    </ul>

CSS：

.nav.navbar-nav.right{ 
    display: flex; 
    align-items: center; 
} 
.nav.navbar-nav.right li a{ 
    padding: 0 10px; 
}

這裏是更新Demo

來源

2016-08-30 10:04:25

正是這樣！謝啦！ – laker001

:)閱讀** [這]（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes）**當你獲得時間 –

工作小提琴：http://jsfiddle.net/804jeg82/545/

我只是在你的CSS中添加了這個。

.navbar-nav { 
    display: flex; 
    align-items: center; 
}

這是flexbox技術。

更多關於Flexbox的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望它可以幫助你。隊友的歡呼聲！

來源

2016-08-30 09:48:23

謝謝你！也許我沒有很好地解釋我自己，但我希望登錄與原來的設置欄一致（在右上角） – laker001

更容易那麼您認爲，包裝在一個錨;）

<a href><i id="settings_icon" class="fa fa-cog" aria-hidden="true"></i></a>

我認爲它是一個鏈接，無論如何，對不對？

來源

2016-08-30 09:49:21 giorgio

很酷，謝謝！也許我沒有很好地解釋我自己，但是我想登錄與原來的設置欄一致（在右上角） – laker001

-2

您還可以添加

margin-top: 16px

你的「#settings_icon」 ID。它也可以解決你的問題，如果你只是想要對齊圖標。

這裏是鏈接：http://jsfiddle.net/804jeg82/548/

來源

2016-08-30 09:52:54 Sazz

只是刪除在登錄錨頂邊距：

#nav_login a { padding-top : 0; }

來源

2016-08-30 09:55:15 dievardump

導航欄內的subnavbars html css

回答

相關問題