交错标签和日期/时间的问题

Question

我在标签的放置和日期/时间方面遇到了问题。它们以交错的方式放置。我希望它们在一条直线水平线上彼此相邻放置。您可以在下面的图片中看到问题。

我希望它们的放置方式如下图所示：

Live Demo

JQuery的：

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function addComment(commentString) {

    var container = $('#divComments');
    var inputs = container.find('label');
    var id = inputs.length + 1;

    var div = $('<div />', {
        class: 'CommentStyle'
    });

    $('<label />', {
        id: 'comment' + id,
        text: commentString
    }).appendTo(div);

    var d = new Date();
        var $fulaDate = $('<div>' + d.getDate()
            + "-" + monthNames[d.getMonth()]
            + "-" + d.getFullYear()
            + "//" + d.getHours()
            + ":" + d.getMinutes()
            + '</div>').appendTo(div);

    var $edit = $('<p />', {
        class: 'edit',
        text: 'Edit'
    }).appendTo(div);

    var $delete = $('<p />', {
        class: 'delete',
        text: 'Delete'
    }).appendTo(div);

    div.appendTo(container);

}

$('#submit').click(function () {
    addComment($('#comments').val());
    $('#comments').val("");
});

CSS：

.CommentStyle {
    border: 2px solid black;
    border-radius: 4px;
    margin-bottom: 10px;
}
.edit, delete {
    cursor:pointer;
}

Answer 1

将此添加到您的CSS：

.CommentStyle div{

     display:inline;
}

p{
    display:inline;
    margin-left:22px;
}

这是你的JS：

$('<br/>').appendTo(div);

您可以设置刚刚播放margin-left

的元素之间的距离（以像素为单位）

DEMO