css - 导航无法显示内联

Question

我在显示内联导航栏时遇到困难。有人可以建议如何修复它吗？

<nav>
    <ul >
        <li ><%= link_to "Tradery", current_user%></li>
        <li> <%= form_tag("/search", method: "get") do %>
            <%= label_tag(:q, "") %>
            <%= text_field_tag(:q) %>
            <%= submit_tag("Search") %>
        <%end%></li>
        <li> <%= link_to "Tradezone", '#' %></li>
        <li> <%= link_to  "Messages", '#' %></li>
        <li> <%= link_to "Notifications", '#' %></li>
        <li><%= link_to title ="Acount","#" %>
            <ul>
                <li><%= link_to "user.business.name", '#'%></li>
                <li><%= link_to "settings", '#'%></li>
                <li><%= link_to "signout", '#'%></li>
                <li><%= link_to "create business",'#'%></li>
                <li><%= link_to "settings", '#'%></li>
                <li><%= link_to "signout", '#'%></li>          
            </ul>
        </li>
    </ul>
</nav> 

代码的 CSS:

nav ul ul {
    display:none;
}
nav ul li:hover> ul{
    display:block;
}
nav ul {
    display:inline-table;
    position:relative;
    background:-moz-linear-gradient
    list-style:none;
    top:100%;
}

Answer 1

对于您的 li 标签，添加内联 block 的显示(将它们保持在同一行)并将它们向左浮动(以删除它们之间的空白)。

像这样:

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

希望对您有所帮助! :-)