设计 CSS 样式

Question

我使用设计导航栏设置我的应用程序，其中包括我在右侧的登录和注册链接。它们是水平的并且大小合适，直到我尝试设置它们的样式（仅更改字体和颜色）。

我添加了一个跨度 class（仅更改字体和字体颜色），现在 join/register 链接显示为垂直堆叠而不是水平堆叠。有谁知道需要做什么才能让它们恢复水平？

这是我设计的跨度样式：

span.deviselinks {
  font-family: 'Quicksand', sans-serif;
  color: white;
    a:link {text-decoration:none; background-color:transparent; color:white;};
    a:visited {text-decoration:none;background-color:transparent; color:white;};
    a:hover {text-decoration:none;background-color:transparent; color:white;};
    a:active {text-decoration:none;background-color:transparent; color:white;};

}

我是这样用的：

<span class="deviselinks">
<% if user_signed_in? %>
  <li>
    <%= link_to('Manage Profile', edit_user_registration_path) %>
  </li>
<% else %>
  <li>
    <%= link_to "Join", "#myRModal", "data-toggle" => "modal" %>
  </li>
    </span>

这是我的导航栏部分：

 <ul class="nav navbar-nav navbar-right">
        <% if user_signed_in? %>
        Hello <%= current_user.first_name %> 
        <%= link_to "Sign out", destroy_user_session_path, :method => :delete %>
        <% else %>
        <%= render "devise/shared/registration_items" %>
        <%= render "devise/shared/login_items" %>
        <% end %>
      </ul>

我尝试了 Max 的建议：

<% if user_signed_in? %>
  <li class="deviselinks">
  <%= link_to('Logout', destroy_user_session_path, :method => :delete) %>       

  </li>
<% else %>
  <li class="deviselinks">

  <%= link_to 'Login', "#myLModal", 'data-toggle' => "modal" %>  
  </li>

它不会以这种方式选择任何设计链接样式。

谢谢

Answer 1

检查 bootstrap 来源，例如这里：https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_navs.scss

它通过 .nav > li 设置 li 的样式，这意味着 li 必须是 ul.nav 的直接子项才能使用 bootstrap 的样式申请。因此，最简单的解决方案是向每个 li 添加 deviselink class，而不是将它们包装在 span:

中

<!-- span -->
  <% if user_signed_in? %>
    <li class="deviselink">
      <%= link_to('Manage Profile', edit_user_registration_path) %>
    </li>
  <% else %>
    <li class="deviselink">
      <%= link_to "Join", "#myRModal", "data-toggle" => "modal" %>
    </li>
  <% end %>
<!-- /span -->

Answer 2

您最好的选择可能是尝试将 float: right 或 left 添加到您的 CSS。

Answer 3

你们的酒吧有固定尺寸吗？发布您的导航栏 CSS 会有所帮助。您的字体可能改变了框的大小，这使得它们不适合菜单的 space 水平排列，因此它们会垂直堆叠。

Answer 4

您应该在 div 中添加 links，同时 link 和 float :left 然后 link 将水平显示。

设计 CSS 样式

Devise CSS Styling

css

ruby-on-rails

devise