使用 <div class=> 进行 ajax 刷新加载时，如何避免开始新行？答案

【问题标题】：How can I avoid starting new line when using <div class=> for ajax refresh loading?使用 <div class=> 进行 ajax 刷新加载时，如何避免开始新行？
【发布时间】：2013-01-07 11:12:15
【问题描述】：

如果我像下面这样换行，它会自动转到下一行。
没有，按钮就在它旁边，这就是我想要的。
但我必须用于 ajax 重新加载目的。我该如何解决这个问题？

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

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-3

【解决方案1】：

您正在使用 div 作为内联内容，请改用 span。

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

【讨论】：

谢谢！这对我来说看起来更好！

【解决方案2】：

使用 display:inline 作为书签类。

.bookmark{
    display:inline;
}

【讨论】：

【解决方案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>

【讨论】：