Wie wird die Schaltfläche in einer Zeile nach dem Eingabe-Tag angezeigt, das in einen Div-Block eingebettet ist?

Question

Für verschachtelte Formen verwende ich gem Cocoon. Ich habe nächste Ansicht

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

erzeugten HTML-

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

Es gibt ein Feld mit Klasse für die Eingabe ist ctrlenter erweitert, nach zwei Tasten "nach oben" und "nach unten" hinzugefügt werden. Im Moment werden diese Schaltflächen nach dem Eingabefeld in der nächsten Zeile angezeigt, und es ist notwendig, dass sie sich in einer Zeile mit dem Eingabefeld befanden. Welche Stile sollte ich hinzufügen, um dies zu realisieren?

Ich habe in _layout.sass

#up_id, #down_id 
    display: inline-block 

Aber nicht wotk

Answer 1

CSS ist ein wütendes Tier Sie in der Unterwerfung ringen müssen. Zum Glück wurden die Dinge viel einfacher, sobald CSS flexboxes ins Leben gerufen wurde. Wenn Sie die Dinge in einer Linie möchten, gehen Sie einfach

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

Und dann mit einem .things-in-a-line Klasse alle Elemente in einem Element wickeln.

Weitere Informationen finden Sie MDN's "Using flexible boxes"