如何讓導航欄元素水平對齊
[英]How to get Navbar elements to align Horizontally
問題描述
Output代碼我正在嘗試創建一個基本的導航欄，但是由於某種原因，一旦我添加了更多元素，它就會垂直而不是水平對齊它們。 我正在使用 bootstrap 3 嘗試此操作，但無法確定這是 bootstap css 文件的問題還是我對 html 所做的問題。 任何反饋或建議將不勝感激！
<head> <title>Bootstrap Nav Bar Example</title> <link rel="stylesheet" type="text/css" href="bootstrap.css"> </head> <body> <nav class="navbar navbar-default"> <div class="nav navbar-nav"> <li><a href="#" class="navbar-brand">Koffee</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </div> </nav> </body>
3 個解決方案
解決方案1
0 2020-07-30 16:45:48
我在創建網頁時遇到了同樣的問題。 為整個導航欄創建一個 class。 嘗試在 css 文件中調整 class 的填充和邊距。 如果問題仍然存在，請嘗試減小大小，將顯示分配為“inline-block”，並嘗試將浮動分配給“left”
解決方案2
0 2020-07-30 17:02:41
首先， navbar class 中的元素具有 2 個 class 屬性。 這是不正確的。 任何 HTML 標記都應該只有一個名為class的屬性。 那里的元素 go 的所有類。
Flexbox 是垂直或水平對齊和間隔項目的好方法。 您可以將這些 styles 應用於您的 ul 元素：
ul{
display:flex;
flex-direction:row;
}
默認情況下， display: flex會連續顯示一些東西，但是添加flex-direction: row屬性也沒有什么壞處。 您可以使用 justify-content 屬性來分隔元素。
更多關於 flexbox 的信息在這里https://www.w3schools.com/css/css3_flexbox.asp 。 應該告訴你你需要知道的一切。
解決方案3
0 2020-07-30 17:15:05
舊方法是使用 li 並使用 display:inline。 （你應該在你的代碼中添加一個 ul 標簽。更好的方法是使用 flex。你會發現它會讓你擺脫更多的麻煩！
li{display:inline;}.flex{ display:flex; justify-content:space-evenly; }
<head> <title>Bootstrap Nav Bar Example</title> <link rel="stylesheet" type="text/css" href="bootstrap.css"> </head> <body> <nav class="navbar navbar-default"> <div class="nav navbar-nav"> <li><a href="#" class="navbar-brand">Koffee</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </div> </nav> <div class="flex"> <a href="#" class="navbar-brand">Koffee</a> <a href="#">About</a> <a href="#">Contact</a> </div> </body>
如何水平對齊標題和導航欄？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.