如何将文本和按钮分开以进行倾斜，或组合文本和按钮？答案

【问题标题】：How to either separate text and button for skew, or combine text and button?如何将文本和按钮分开以进行倾斜，或组合文本和按钮？
【发布时间】：2018-10-19 23:49:51
【问题描述】：

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

<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;

我怎样才能完成其中一种方法？顶部的文本和按钮不会分离。最下面的，按钮和文字不会附加。

【问题讨论】：

标签： html css ruby-on-rails ruby

【解决方案1】：

没有看到你的控制器或路由，我不得不猜测它必须是：

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

但是，如果您没有使用传统的 restful 路由，并且您传递的模型与控制器的名称类型与实例变量的类相同，那么您将需要更加详细。

<% @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 助手的变化

【讨论】：

类别不是路径。这是一个附加到列表的模型/表格。我不相信我能那样做。我认为这是一个 CSS/html 问题。再说一次，一旦我今晚或明天回到那个应用程序，我会试试这个，我会在这里更新
link_to helper 的 rails 约定会自动尝试将对象类型转换为它的显示页面。但是，如果您不使用传统的 REST 路由，则需要更详细的内容。

【解决方案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>

现在，所有的按钮都是一个链接:)

【讨论】：