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标记，添加内联块的显示（将它们保持在同一行）并向左浮动它们（以删除它们之间的空白区域）。

像这样：

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

希望它有所帮助！： - ）

导航无法内联显示

1 个答案: