如何分开文本和按钮以倾斜，或组合文本和按钮？

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

在没有看到您的控制器或路由的情况下，我不得不猜测它必须是：

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

但是，如果您不使用常规的静态路由，并且传递的模型与实例变量的类的名称类型不相关，则该模型将更加冗长。

<% @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帮助程序的各种信息

Answer 2

如果您想将文本与按钮分开，并分别使用#btn-cat和#btn-text。

您可以使用：

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

现在，所有按钮都是一个链接：）