我是红宝石和CSS的新手。我想在我的rails项目中创建一个导航栏,其中链接连续水平移动。现在,它们是垂直列出的。在物化文档中,它表明我要做的就是在<ul>
中为该类输入“正确的隐藏和隐藏”。但是,这似乎不适用于我。
我究竟做错了什么?任何建议将不胜感激。
这是我的application.html.erb文件。
<!DOCTYPE html>
<html>
<head>
<title>PlacesToGo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="container">
<a class="brand-logo" href="<%= root_url %>"/><h2>Places To Go</h2></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<% if current_user %>
<li><%= link_to "Home", user_path(current_user)%></li>
<li><%= link_to "Sites", sites_path %></li>
<li><%= link_to "Restaurants", restaurants_path %></li>
<li><%= link_to "Hotels", hotels_path %></li>
<li><%= link_to "Log Out", logout_path %></li>
<br />
<%= form_tag(users_path, :method => "get", id: "search-form") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Users" %>
<%= submit_tag "Search", :name => nil %>
<% end %>
<% else %>
<li><%= link_to "Sign Up", new_user_path %></li>
<li><%= link_to "Sign In", signin_path %></li>
<% end %>
</ul>
</div>
</div>
</header>
</body>
</html>
最佳答案
Ruby将在HTML中打印这样的内容,您需要创建一个新的CSS规则来处理和转换ul
中的li
和navbar
标记。
这是基于您的html代码的基本示例。
#nav-mobile {
overflow-x: hidden;
white-space: nowrap;
height: 1.2em;
width: 100%;
}
#nav-mobile li {
padding: 10px;
display: inline;
}
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Home</li>
<li>Sites</li>
<li>Restaurants</li>
<li>Hotels</li>
<li>Log Out</li>
<li>Sign Up</li>
<li>Sign In</li>
</ul>
关于html - 导航栏中的链接在Rails元素中垂直列出,而不是水平列出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43623758/