0

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

3 に答える 3

1

ブックマーク クラスには display:inline を使用します。

.bookmark{
    display:inline;
}
于 2013-01-07T11:14:06.130 に答える
1

インライン コンテンツとして必要なものに div を使用しています。代わりにスパンを使用してください。

<span class="bookmark" data-communities-id="<%= community.id %>">
    <%= render :partial => "communities/bookmark", :locals => {:community => community} %>
</span>
于 2013-01-07T11:31:13.473 に答える
1

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>
于 2013-01-07T11:32:06.050 に答える