divタグに埋め込まれている入力タグの後に1行でボタンを表示するにはどうすればよいですか？

Question

ネストされたフォームの場合、私はgem cooconを使用します。 は、私は次のビューを持っている

_poll_item_field.html.erb

.poll_row 
    .poll_item 
    = f.input :answer, input_html: { class: 'ctrlenter expanding' }, label: false, placeholder: 'Введите вариант ответа' 
    = button_tag 'Up', class: 'btn btn-bg', id: 'up_id', type: 'button' 
    = button_tag 'Down', type: 'button', class: 'btn btn-bg', id: 'down_id' 

    = link_to_remove_association "delete", f, { wrapper_class: 'poll_item' } 

生成されたHTMLクラスと入力する欄が二つのボタンの後、を拡大ctrlenterあり

<div class="poll_item"> 
     <div class="control-group string required blog_post_poll_poll_items_answer"> 
     <div class="controls"><input class="string required ctrlenter expanding" display="inline" id=" blog_post_poll_attributes_poll_items_attributes_0_answer" margin="0" name="blog_post[poll_attributes][poll_items_attributes][0][answer]" placeholder="Введите вариант ответа" size="50" type="text"> 
     </div> 
    </div> 
     <button class="btn btn-bg" display="inline" id="up_id" name="button" type="button">up</button> 
     <button class="btn btn-bg" display="inline" id="down_id" name="button" type="button">down</button> 
     <input id="blog_post_poll_attributes_poll_items_attributes_0__destroy" name="blog_post[poll_attributes][poll_items_attributes][0][_destroy]" type="hidden" value="false"><a href="#" class="remove_fields dynamic" data-wrapper-class="poll_item">delete</a> 
    </div> 

追加する「上」および「下」。現時点では、これらのボタンは次の行の入力フィールドの後に表示され、入力フィールドとともに1行にある必要があります。これを実現するためにどのようなスタイルを追加する必要がありますか？

私は_layout.sassに

#up_id, #down_id 
    display: inline-block 

を追加しました。しかしwotk

Answer 1

CSSは、あなたが提出に格闘しなければならない怒りの獣であるいけません。幸いなことに、CSS flexboxesが生まれれば、事はもっと簡単になりました。あなたがラインで物事をしたい場合は、単に

.things-in-a-line{ 
    display: flex; 
    flex-direction: row; /* this is actually the default, but I put it here for clarity reasons */ 
} 

を行い、その後、.things-in-a-lineクラスを持つ要素内のすべての要素をラップします。詳細については

、MDN's "Using flexible boxes"