为什么这些列表元素不出现在一行中

Question

我正在尝试使纳维尔元素并排出现，下拉菜单使菜单下降。

我知道有nav元素，我知道为此有一千个jQuery插件。我只想了解为什么这个不起作用。

http://codepen.io/anon/pen/hjkld

<!-- Works all the way down to IE7! -->
<header>
<nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <ul class="drop">
       <li>
           <a href="#">dropdown</a>
       </li>
       <li class="menu">
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
       </li>
    </ul>
    <a href="#">link</a>
    <a href="#">link</a>    
</nav>
</header>
li {
 list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

Answer 1

尝试

ul, li {
    display: inline;
}

更新

我找到了一个快速解决方案，而无需使用JavaScript！您可能需要进行一些更改以解决小问题。

这是我为您的HTML建议的：

<header>
    <nav>
        <ul>
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="menu">Dropdown
                <ul class="drop">
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </li>
            <li><a href="#">link 7</a></li>
            <li><a href="#">link 8</a></li>
        </ul>
    </nav>  
</header>

它更清洁，语义更清洁。

现在为CSS：

a, ul, li {
    list-style-type:none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: inline;
    text-decoration: none;
}
a:hover {text-decoration: underline;}
ul {display: inline-block;}
.drop {
    display: none;
    padding: 5px;
    border: 1px solid #000;
    background-color: #fff;
}
.menu:hover .drop {
    display: block;
    position: absolute;
    left: 90px;
}
.drop li {display: block;}

不需要JS。

通过Codepen在此处进行演示。

Answer 2

也需要将display: inline;添加到<li>元素。否则，它仍然被阻止。

Answer 3

您的列表被显示为块元素。这将填充水平的空间，从而导致元素垂直渲染。

为了解决此问题，您可以发生显示类型：

display: inline;
display: inline-block;

或者您可以浮动元素，这将使它不再水平填充，并允许并排显示元素：

float: left;

有关CSS显示类型的更多详细信息，请参见此处http://css-tricks.com/almanac/properties/d/display/

Answer 4

尝试此CSS改为：

a{
  vertical-align: top;
}
li {
 list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
ul{
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

这将使它们全部最终进入同一行，但是对于下拉菜单，在显示的下拉菜单时仍然需要做一些事情。

Answer 5

我认为这就是您要搜索的内容：

尝试以下操作：http：//codepen.io/anon/pen/vaekt

对于标记的一致性，我在 <nav>元素中交换了 <ul>列表。

html

<header>
  <nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <nav class="drop">
      <span>dropdown</span>
      <nav class="menu">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
      </nav>
    </nav>
    <a href="#">link</a>
    <a href="#">link</a>    
  </nav>
</header>

CSS

li {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
nav,
ul {
 display: inline-block; 
}
.drop {
  position: relative;
}
.drop .menu {
  position: absolute;
  bootom: 0;
  left: 0;
}