我想在不使用引导程序的情况下对齐导航栏中的项目

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>