Question

我在c9.io上有一个用rails和一些haml制成的食谱网站。在显示页面上，我想以简单的形式显示用户输入的价格，并在其旁边加上一个美元符号。我尝试使用<p>标签，但是美元符号出现在另一行。

这是我的show.html.haml文件：

#post_show
%h1= @post.title
%p.username
    Shared by
    = @post.user.name
    about
    = time_ago_in_words(@post.created_at)
.clearfix
    .post_image_description
        = image_tag @post.image.url(:medium)
        .description= simple_format(@post.description)
        %h6 Notes:
        .notes= simple_format(@post.notes)
        %h6 Price:
        %p
        .price= (@post.price) 


    .post_data
        = link_to "Visit Link", @post.link, class: "button", target: "_blank"
        = link_to like_post_path(@post), method: :get, class: "data" do
            %i.fa.fa-thumbs-o-up
            = pluralize(@post.get_upvotes.size, "Like")
        = link_to dislike_post_path(@post), method: :get, class: "data" do
            %i.fa.fa-thumbs-o-down
            = pluralize(@post.get_downvotes.size, "Dislike")
        %p.data
            %i.fa.fa-comments-o
            = pluralize(@post.comments.count, "Comment")
        - if @post.user == current_user
            = link_to "Edit", edit_post_path(@post), class: "data"
            = link_to "Delete", post_path(@post), method: :delete, data: { confirm: "Are you sure?" }, class: "data"
    #random_post
        %h3 Check this out
        .post   
            .post_image 
                = link_to (image_tag @random_post.image.url(:small)), post_path(@random_post)
                .post_content
                    .title
                        %h2= link_to @random_post.title, post_path(@random_post)

                    .data.clearfix
                        %p.username
                            Share by
                            = @random_post.user.name
                        %p.buttons
                            %span
                                %i.fa.fa-comments-o
                                = @random_post.comments.count
                            %span
                                %i.fa.fa-thumbs-o-up
                                = @random_post.get_likes.size
 #comments
    %h2.comment_count= pluralize(@post.comments.count, "Comment")
        - @comments.each do |comment|
            .comment
                %p.username= comment.user.name
                %p.content= comment.content
        %h2 Share your opinion:
        = render "comments/form"

这是我的帖子的form.html.haml：

    %div.container
  = simple_form_for @post do |f|
    = f.input :image
    = f.input :title
    = f.input :link
    = f.input :description
    = f.input :notes
    = f.input :price
    %br
    = f.button :submit, class: "btn btn-info"

我们将不胜感激。

编辑：所以现在，我添加了以下内容：

%span .input-group-addon $ .price= (@post.price)

但是，美元符号位于第一行，价格位于底部。

Answer 1

p是阻止内容，因此默认情况下会在html中引起换行。您可以使用CSS处理此问题，也可以使用诸如span标签之类的内联内容

Answer 2

带有前一个美元符号的Haml输入仅包含在您的代码中，您可以：或者只使用类：

.input-group
  %span.input-group-addon $
  %input.form-control{:placeholder => "Price", :type => "text"}/

类似：https://gist.github.com/dhaupin/7a5d429de5be0d623add58edad51b479

在用户输入的价格输入旁边添加$

2 个答案: