如何在嵌入在 div 块中的输入标签后的一行中显示按钮？

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

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

在"up"和"down"两个按钮后，有一个class ctrlenter扩展输入字段。目前，这些按钮显示在下一行输入字段之后，并且它们必须与输入字段在一行中。为了实现这一点，我应该添加哪些样式？

我在 _layout.sass

中添加了

#up_id, #down_id 
  display: inline-block

但是不知道

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 class 将所有元素包裹在一个元素中。

有关详细信息，请参阅 MDN's "Using flexible boxes"

如何在嵌入在 div 块中的输入标签后的一行中显示按钮？

How to display the button in one line after the input tag, which is embedded in a div block?

ruby-on-rails

haml