Question

我在设置导航栏样式时遇到问题，特别是导航栏中的下拉菜单。下面的两个li元素（链接到“个人资料”和“编辑个人资料”的元素都没有显示正确。正如您所看到的，我已经以两种不同的方式添加了课程my-dropdown-item相同的结果。导航栏的代码：

<div class="container">
 <div class="header">
  <div class="top-nav">
      <ul class="nav1">
          <li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
          <li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>

       # The dropdown menu #
       <li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
          <ul class="dropdown-menu" role="menu">
              <li><%= link_to "Profile", current_user, html_options = {class: "my-dropdown-item"} %></li>
              <li class="my-dropdown-item"><%= link_to "Edit profile", edit_user_path(current_user) %></li>
          </ul>
       </li>

      </ul>
  </div>
 </div>
</div>

结果是字体显示为白色，而应为黑色。在我的css文件中，我有：

.my-dropdown-item {
  width: 100%;
  color: #000;
}

使用检查器我可以看到.top-nav ul li a的样式覆盖了颜色（因此my-dropdown-item指定的字体颜色是直通的）。后一种样式存在于css文件file1.css中，而{2}存在于file2.css中。在.my-dropdown-item我application.css行前*= require file1。所以我不明白为什么*= require file2否决.top-nav ul li a。 我知道如何弄清楚原因以及该怎么办？

Answer 1

我认为你试图将<li>内的链接放入黑色。

您的问题是，.top-nav ul li a指向<a>元素而.my-dropdown-item未指向此<a>。

这意味着.my-dropdown-item内的所有内容都是黑色的，但如果将内容包装到新的包装器元素中，则会采用此属性。

为了获得良好的表现，您必须包括该课程以及之前的其他课程.top-nav .my-dropdown-item a。

我为你提供了一个更好理解的例子。

.top-nav ul li a {
  color: green
}

.top-nav .my-dropdown-item a{
  width: 100%;
  color: red;
}

<div class="container">
 <div class="header">
  <div class="top-nav">
      <ul class="nav1">
          <li class="hvr-bottom <%= 'active' if current_page?(root_path) %>"><%= link_to "Home".html_safe, root_path %></li>
          <li class="hvr-bottom <%= 'active' if current_page?(target_path) %>"><%= link_to "Target".html_safe, target_path %></li>

       # The dropdown menu #
       <li class="dropdown hvr-bottom" style="max-width:300px; width:auto;">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> "Drop-down Menu"</a>
          <ul class="dropdown-menu" role="menu">
              <li><a>Profile</a></li>
              <li class="my-dropdown-item"><a>Edit Profile</a></li>
          </ul>
       </li>

      </ul>
  </div>
 </div>
</div>

Answer 2

在link_to中添加覆盖类：

  <%= link_to "Edit profile", edit_user_path(current_user), class:"my-dropdown-item" %>

添加到CSS

.my-dropdown-item {
  a {
  width: 100%;
  color: #000 !important;
  }
}

这可能需要一些调整，请告诉我。

样式导航栏：不同样式设置之间的交互

2 个答案: