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

Posted 2023-02-26

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

【英文标题】：Ruby Rails veiw trying to display title (h1) on same line as links

【发布时间】：2014-02-18 04:02:19

【问题描述】：

我有一个显示视图，它在 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) 尝试了其他修复，但我的帖子可能开始变得复杂。

任何帮助表示赞赏 皮埃尔

【参考方案1】：

h1 
  display: inline-block;

Demo