使用时如何避免开始换行 <div class=> Ajax刷新加载？

Question

If I wrap with just like below, it automatically goes to next line.
Without , the button comes right next to it, that's what I want.
But I have to use for ajax reload purpose. How can I solve this?

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

Answer 1

Use the display:inline for bookmark class.

.bookmark{
    display:inline;
}

Answer 2

You're using a div for something you want as inline content, use a span instead.

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

Answer 3

Div is a block-level element. This means that it will act like a block, and not like an inline element.

Change display property to

• inline if you want to change it to an inline level element;
• inline-block if you want it to be inline, but to act as a block element level.

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