更新

Question

我正在尝试让导航栏元素并排显示在一行中，下拉列表会导致菜单在其下方下拉。

我知道有nav元素，我知道有一千个jQuery插件。我只想了解为什么这个无效。

<!-- 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。

Demo via Codepen here.

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

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

<强> 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;
}

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

5 个答案:

更新