如何在嵌入div塊的輸入標籤之後在一行中顯示按鈕？

對於嵌套表單，我使用寶石coocon。我有一個視圖如何在嵌入div塊的輸入標籤之後在一行中顯示按鈕？

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

有與類輸入字段ctrlenter擴大，後兩個按鈕「上」和「下」添加。此時，這些按鈕將顯示在下一行的輸入字段後面，並且必須將它們與輸入字段放在一行中。爲了實現這一點，我應該添加哪些樣式？

我_layout.sass

#up_id, #down_id 
    display: inline-block

添加，但不wotk

來源

2016-04-14 Stefan Hansch

嘗試'顯示：inline-block的重要' –

我tryed。不工作 –

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"

來源

2016-04-15 23:58:38 Shelvacu

如何在嵌入div塊的輸入標籤之後在一行中顯示按鈕？

回答

相關問題