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

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"}/

看起来像：http://jsfiddle.net/s6Xu6/1/