我想在不使用引導程序的情況下對齊導航欄中的項目

Question

我想在不使用Bootstrap的情況下在導航欄中對齊項目，因爲我想先用CSS構建一個堅實的基礎。但我無法將我的navbar-與我的徽標和navbar-center對齊。 ！我一直在試圖尋找解決方案，但似乎沒有人有後這個問題尚未:(請幫忙，謝謝提前這裏是我的代碼：

HTML

<div class="navigation"> 
    <div class="name">Logo</div> 
     <div class="menu-list"> 
     <!-- Center Nav --> 
     <ul class="navbar-center"> 
      <li><a href="">Sneakers</a></li> 
      <li><a href="">Apparel</a></li> 
      <li><a href="">Ack</a></li> 
      <li><a href="">Events</a></li> 
      <li><a href="">Contact</a></li> 
    </ul> 
    </div> 

    <div class="menu-list-right"> 
    <ul class="navbar-right"> 
    <!-- Right nav --> 
     <li><a href="">Search</a></li> 
     <li><a href="">Bag</a></li> 
    </div> 
    </div> 

CSS

body { 
    margin: 0; 
    } 

    .navigation { 
    background: skyblue; 
    } 

    .name { 
    display: inline-block; 
    float: left; 
    } 

    .menu-list ul { 
    list-style: none; 
    text-align: center; 
    padding: 0; 
    } 

    .menu-list ul li { 
    display: inline-block; 
    } 

    .menu-list ul li a { 
    text-decoration: none; 
    } 


    .menu-list-right ul { 
    list-style: none; 
    padding: 0; 
    float: right; 
} 

.menu-list-right ul li { 
    display: inline-block; 
} 

.menu-list-right ul li a { 
    text-decoration: none; 
} 

.name, .navbar-center, .navbar-right li { 
    margin: 0; 
} 

Answer 1

您可以嘗試使用CSS Flexbox。讓你.navigation柔性佈局，如：

.navigation { 
    display: flex; 
    justify-content: space-between; /* Horizontally space-out items */ 
    align-items: center; /* Vertically center align items */ 
} 

看一看下面的代碼片段：

body { 
 
    margin: 0; 
 
    } 
 

 
    .navigation { 
 
    background: skyblue; 
 
    padding: 10px 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
    } 
 

 
    .name { 
 
    flex: 1; 
 
    padding: 0 10px; 
 
    } 
 

 
.menu-list { 
 
    flex: 3; 
 
} 
 

 
    .menu-list ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0 10px; 
 
    } 
 

 
    .menu-list ul li { 
 
    display: inline-block; 
 
    } 
 

 
    .menu-list ul li a { 
 
    text-decoration: none; 
 
    padding: 0 5px; 
 
    } 
 

 
.menu-list-right { 
 
    flex: 1; 
 
    text-align: right; 
 
} 
 

 
.menu-list-right ul { 
 
    list-style: none; 
 
    padding: 0 10px; 
 
    margin: 0; 
 
} 
 

 
.menu-list-right ul li { 
 
    display: inline-block; 
 
} 
 

 
.menu-list-right ul li a { 
 
    text-decoration: none; 
 
    padding: 0 5px; 
 
} 
 

 
.name, .navbar-center, .navbar-right li { 
 
    margin: 0; 
 
}

<div class="navigation"> 
 
    <div class="name">Logo</div> 
 
     <div class="menu-list"> 
 
     <!-- Center Nav --> 
 
     <ul class="navbar-center"> 
 
      <li><a href="">Sneakers</a></li> 
 
      <li><a href="">Apparel</a></li> 
 
      <li><a href="">Ack</a></li> 
 
      <li><a href="">Events</a></li> 
 
      <li><a href="">Contact</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="menu-list-right"> 
 
    <ul class="navbar-right"> 
 
    <!-- Right nav --> 
 
     <li><a href="">Search</a></li> 
 
     <li><a href="">Bag</a></li> 
 
    </div> 
 
    </div>

希望這有助於！

Answer 2

如果你可以使用Flexbox的：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.navbar-center, .navbar-right { 
display: flex; 
flex-direction: row; 
justify-content: space-around; 
} 
.navbar-center li, .navbar-right li { 
    align-self: center; 
} 

Answer 3

您應該設置一定的width每個元素，然後使用display:inline或float: left

body { 
 
    margin: 0; 
 
    } 
 

 
    .navigation { 
 
    background: skyblue; 
 
    } 
 
    
 
    .navigation::after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.name { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 10%; 
 
} 
 

 
.menu-list { 
 
    float: left; 
 
    width: 80%; 
 
} 
 

 
.menu-list-right { 
 
    float: right; 
 
    width: 10%; 
 
} 
 

 
    .menu-list ul { 
 
    list-style: none; 
 
    text-align: center; 
 
    padding: 0; 
 
    } 
 

 
    .menu-list ul li { 
 
    display: inline-block; 
 
    } 
 

 
    .menu-list ul li a { 
 
    text-decoration: none; 
 
    } 
 

 

 
    .menu-list-right ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    float: right; 
 
} 
 

 
.menu-list-right ul li { 
 
    display: inline-block; 
 
} 
 

 
.menu-list-right ul li a { 
 
    text-decoration: none; 
 
} 
 

 
.name, .navbar-center, .navbar-right li { 
 
    margin: 0; 
 
}

<div class="navigation"> 
 
<div class="name">Logo</div> 
 
<div class="menu-list"> 
 
<!-- Center Nav --> 
 
<ul class="navbar-center"> 
 
<li><a href="">Sneakers</a></li> 
 
<li><a href="">Apparel</a></li> 
 
<li><a href="">Ack</a></li> 
 
<li><a href="">Events</a></li> 
 
<li><a href="">Contact</a></li> 
 
</ul> 
 
</div> 
 

 
<div class="menu-list-right"> 
 
<ul class="navbar-right"> 
 
<!-- Right nav --> 
 
<li><a href="">Search</a></li> 
 
<li><a href="">Bag</a></li> 
 
</ul> 
 
</div>