Question

我正在尝试将下面的导航菜单显示为内联。然而，它应用的任何其他更改，但不是显示：inline-block;属性。

<div class="container">
    <a class="hide" href="#">Close</a>
     <header>
         <div class="title">
             <h1>I'M JAMIE</h1>
              <h4>Looking for a development opportunity and much more</h4>
         </div>
     <nav>
             <ul>
         <li><a href="#">About me </a></li>
         <li><a href="#">Projects</a></li>
         <li><a href="#">Home</a></li>
         <li><a href="#">About me </a></li>
         <li><a href="#">Projects</a></li>
         </ul>
             </nav>
    </header>

css代码是

 header nav ul li a {
   display:inline-block;

 }

Answer 1

http://jsfiddle.net/33mt8xff/

header > nav > ul > li {
   display:inline-block;

 }

这将显示彼此相邻的列表项。 >表示选择孩子。现在，只有作为header元素后代的li元素才会被设置样式。

Answer 2

header > nav > ul > li {
   float: left;
   margin-right: 10px;
   list-style: none;
}

或

header > nav > ul > li {
   display: inline-block;
}

什么不能让这个导航显示内联？

2 个答案: