Jeditable - ブロックではなくインラインでエディットボックスを表示しますか？

Question

ブロックの代わりにインライン要素としてエディットボックスをJeditableに表示させる方法はありますか？私はまた、ブートストラップ3を使用しています。さまざまな値を持つ "スタイル"属性をJSに追加しようとしましたが、効果がないようです。

ここでは、もともとどのように見えるかです：

   

しかし、これは私がjeditableで値を編集するために起動したときに、それがどのように表示されるかである：

   

これがされどのように表示されるか：

---

   

関連するHTML：

<div class="col-sm-4"> 
    <span id="songtitle-CD001-1" class="edit-song">Song number 1</span> 
    (<span id="songdura-CD001-1" class="edit-song">00:03:16</span>) 
    <br /> 
    <span id="songtitle-CD001-2" class="edit-song">Song number 2</span> 
    (<span id="songdura-CD001-2" class="edit-song">00:03:46</span>) 
    <br /> 
</div> 

JS：

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline;">Song number 1</span> 

：私も直接タグにスタイルを追加しようとした

// Edit song text 
$('.edit-song').editable('templates/edits/edit-song.php', { 
    indicator: 'Saving...', 
    tooltip: 'Click to edit...' 
}); 
$('.edit-song-area').editable('templates/edits/edit-song.php', { 
    type: 'textarea', 
    submit: 'OK', 
    cancel: 'Cancel', 
    indicator: 'indicator', 
    tooltip: 'Click to edit...', 
    style: 'inherit' // I have also tried "display: inline' 
}); 

しかし、それは無視されるようですか？でもそれは後に!importantで：

<span title="Click to edit..." id="songtitle-CD001-1" class="edit-song" style="display:inline; !important">Song number 1</span> 

インラインで表示するjeditable要素を強制的にいくつかの方法はありますか？

Answer 1

ああ、心配しないでください。 edit要素が ".edit-song-area"で定義されていても、display：inline部分は次のように親要素になければなりません。

// Edit song text 
$('.edit-song').editable('templates/edits/edit-song.php', { 
    indicator: 'Saving...', 
    tooltip: 'Click to edit...', 
    style: 'display: inline' // <-- Must be here 
}); 
$('.edit-song-area').editable('templates/edits/edit-song.php', { 
    type: 'textarea', // ...even though the other parts are defined here 
    submit: 'OK', 
    cancel: 'Cancel', 
    indicator: 'indicator', 
    tooltip: 'Click to edit...', 
});