Düğme, bir div bloğuna yerleştirilmiş giriş etiketinden sonra bir satırda nasıl görüntülenir?

Question

İç içe formlar için gem cocon'u kullanıyorum. sonraki görünüme sahip

_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' } 

Oluşturulan html sınıfına ile girişi için alan iki düğme sonra, genişleyen ctrlenter yoktur

<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> 

eklenecek "yukarı" ve "aşağı". Şu anda, bu düğmeler sonraki satırdaki giriş alanından sonra görüntülenir ve giriş alanıyla birlikte bir satırda olmaları gerekir. Bunu gerçekleştirmek için hangi stilleri eklemeliyim?

Ben _layout.sass

#up_id, #down_id 
    display: inline-block 

eklenen Ama boyun uğraşmak gerekir öfkeli canavar wotk

Answer 1

CSS yok. Neyse ki, işler CSS flexboxes ortaya çıktığında çok daha kolay oldu. Eğer bir çizgide şeyler istiyorsanız, basitçe

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

yapmak Ve sonra bir .things-in-a-line sınıfın sahip bir öğenin tüm öğelere sarın.

fazla bilgi için, MDN's "Using flexible boxes"