html - 如何将文本和按钮分开以进行倾斜，或者将文本和按钮组合在一起？

Question

所以我有以下有效的代码，但我无法将文本与按钮分开。例如，倾斜时，文本会倾斜。有什么办法把它们分开吗？

<div class="row">
  <div class="left">
      <h2>Categories</h2>
        <div class="categories-">

          <% @categories.each do |cat| %>
            <%= link_to cat.name, listings_path(:category => cat), class: "btn btn-primary-2" %>
          <% end %>
      </div>

这是 CSS:

 .categories- {
   padding-top: 30px;
   font-size: 30px;
   -webkit-font-smoothing: antialiased;
 }

然后我尝试这样做，这很有效，但是当点击按钮本身时，没有点击任何东西，因为它没有附加到链接。有什么附加方法吗？

<div class="categories-">
      <% @categories.each do |cat| %>
        <div id="btn-text"><div id="btn-cat"><%= link_to cat.name, listings_path(:category => cat) %></div></div>
      <% end %>
  </div>

我被告知你添加，但那没有用。

这是 CSS:

 #btn-cat {
    transform: skew(-15deg);
    background: linear-gradient(to right,  yellow, red) !important;
    border: none;
    color: white;
    padding: 20px;

    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px !important;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  }

  #btn-text {
    transform: skew(15deg);
    background: transparent;
    border: none;
    color: white !important;
    text-decoration: none !important;

我怎样才能完成这些方法中的任何一种？最上面的文字和按钮不会分离。底部的按钮和文本不会附加。

Answer 1

如果没有看到您的 Controller 或路线，我将不得不猜测它必须是:

<% @categories.each do |cat| %>
  <%= link_to cat.name, category_path(cat), class: "btn btn-primary-2" %>
<% end %>

但是如果您不使用传统的 restful 路由，并且您传递的模型与具有与实例变量类相同名称类型的 Controller 不相关，则您需要更加冗长。

<% @categories.each do |cat| %>
    <%= link_to cat.name, controller: 'listings', action: 'show', id: cat.id, class: 'btn btn-primary-2' %>
 <%  end %>

上面应该尝试产生:

<a href="/listings/show/23" class="btn btn-primary-2">Category Name</a> 
# where 23 and Category name are repspective from the cat object.

See documentation有关如何使用 link_to 帮助器

的变体