Question

我有一个显示视图，在H1中显示模型（帖子）名称，以及帖子的“编辑”和“删除”按钮。

我希望在编辑和删除按钮的同一行显示标题（H1）。

我在下面列出了我目前所拥有的内容，然后在下面列出了我所尝试的内容，到目前为止还未成功，将所有内容放在同一行上。

视图

<h1><%= @post.title %></h1>
<% if can? :edit, @post %>
  <%= link_to 'Edit', edit_post_path(@post), class: "btn-warn" %>
<% end %>
<% if can? :destroy, @post %>
  <%= link_to 'Delete', @post, method: :delete, 
      data: { confirm: 'Are you sure?' }, class: "btn-alert" %>
<% end %>

我试过了

（1）将浮子添加到上面，例如和一些CSS以及将其添加到视图

CSS

.article-face-img{
    float: left;
    padding: .8em;
}

视图变为

<div class= "article-face-img"> 
  <h1><%= @post.title %></h1>
  <% if can? :edit, @post %>
    <%= link_to 'Edit', edit_post_path(@post), class: "btn-warn" %>
  <% end %>
  <% if can? :destroy, @post %>
    <%= link_to 'Delete', @post, method: :delete, 
        data: { confirm: 'Are you sure?' }, class: "btn-alert" %>
  <% end %>
</div>
<div class="clearfix"></div>

（2）我尝试将其添加到视图

<fieldset data-type="horizontal">

（3）尝试了其他修正，但我的帖子可能开始变得错综复杂。

任何帮助表示赞赏皮尔

Answer 1

h1 {
  display: inline-block;
}

<强> Demo

Ruby Rails试图在与链接相同的行上显示标题（h1）

1 个答案: