CSS 导航栏项不按顺序排列?

Question

我的导航栏项目按"产品"、"关于"和"联系我们"的顺序排列。

在实时网站上，它是"关于"然后"联系我们"然后是"提供">

我可以使用某种代码或div 分组来确保它们按列出的顺序显示？

从我的应用程序粘贴代码.html.erb：

div class="navbar-order">
<ul class="nav navbar-nav navbar-right">
<div class="dropdown">
<button class="dropbtn"><li><%= link_to "Offerings", offerings_path %></li></button>
<div class="dropdown-content">
<li><%= link_to "Public Speaking", pages_public_speaking_path %></li>
<li><%= link_to "Nonverbal Communication", nonverbal_path %></li>
<li><%= link_to "Group Dynamics", group_dynamics_path %></li>
<li><%= link_to "Intercultural Communication", intercultural_communication_path %></li>
<li><%= link_to "Editing", editing_path %></li>
<li><%= link_to "Interviewing", interviewing_path %></li>
<li><%= link_to "Business Etiquette", business_etiquette_path %></li>
<li><%= link_to "Business Writing", business_writing_path %></li>
</div>
</div>

<li><%= link_to "About", about_path %></li>
<li><%= link_to "Contact Form", new_contact_path %></li>
</ul>
</div>

Answer 1

ul {
display:flex;
list-style-type: none;
}
ul li {
margin-right:20px;
}

<nav>
<ul>
<li>The</li>
<li> Correct</li>
<li>Order</li>
</ul>
</nav>

尝试重新构建您的 HTML 导航标记。

关键是你应该把<li>放在<ul>而不是divs中。如果您正确创建标记并放置一些display:flex或display:inline-block<ul>，它不可能以中断的顺序显示