javascript - 防止在 jeditable 触发器后换行

Question

我希望 jeditable 提供的编辑字段与触发它的文本保持在同一行。我创建了一个 jsfiddle 来展示我的意思

https://jsfiddle.net/xu1ree7v/8/

如您所见，编辑字段总是在下一行...我试过“white-space: nowrap;”和“显示:内联；”但所有这些似乎都被 jeditable 忽略了。我的 javascript 看起来像这样

$(document).ready(function () {
    $(".display-date").editable('www.example.com', {
        type: 'select',
        data: "{'Belgrade':'Belgrade','Paris':'Paris','London':'London', 'selected':'Belgrade'}",
        cancel: 'cancel',
        submit: 'ok',
    });
});


$(".edit-trigger").click(function () {
    $(this).prev().trigger(".display-date");
});

html是

<p style="font-size:10pt; white-space: nowrap;display: inline;">Next meeting:
    <div class="display-date select_next_jc" style="font-size:10pt; white-space: nowrap;display: inline;">test-time <a class="edit-trigger">Edit</a>

    </div>
</p>

谢谢卡尔

Answer 1

在 Jeditable 选项中使用 style: 'inherit':

$(document).ready(function () {
    $(".display-date").editable('www.example.com', {
        type: 'select',
        data: "{'Belgrade':'Belgrade','Paris':'Paris','London':'London', 'selected':'Belgrade'}",
        cancel: 'cancel',
        submit: 'ok',
        style: 'inherit'
    });
});

JSFiddle:https://jsfiddle.net/06g8q2g8/

这将使新创建的表单继承与您在可编辑元素上设置的样式相同的样式(包括display: inline)。

来源:http://www.appelsiini.net/projects/jeditable