使用時如何避免開始換行 <div class=> Ajax刷新加載？

Question

如果像下面這樣包裝，它將自動轉到下一行。
沒有，按鈕就在它旁邊，這就是我想要的。
但是我必須使用Ajax重新加載的目的。 我該如何解決？

<div class="bookmark" data-communities-id="<%= community.id %>">
    <%= render :partial => "communities/bookmark", :locals => {:community => community} %>
</div>  

Answer 1

使用display：inline作為書簽類。

.bookmark{
    display:inline;
}

Answer 2

您將div用於要作為內聯內容的內容，請改用span。

<span class="bookmark" data-communities-id="<%= community.id %>">
    <%= render :partial => "communities/bookmark", :locals => {:community => community} %>
</span>  

Answer 3

Div是一個塊級元素。 這意味着它將像塊一樣，而不是內聯元素。

將display屬性更改為

• inline如果要更改為內聯級別元素）；
• inline-block如果您希望它是內聯的，但充當塊元素級別。

演示： http ： //jsfiddle.net/

的CSS

div {
 border: 1px solid red; 
 padding: 10px; 
 background-color: #ccc;
 color: white;
 width: 100px;
}

的HTML

Display: block (default):<br/><br/>
<div>Frindcode</div>
<div>Bookmark</div>

<br/><br/><br/>

Display: inline:<br/><br/>
<div style="display: inline;">Frindcode</div>
<div style="display: inline;">Bookmark</div>

<br/><br/><br/>

Display: inline-block:<br/><br/>
<div style="display: inline-block;">Frindcode</div>
<div style="display: inline-block;">Bookmark</div>