Question

当我双击卡片时会弹出对话框，然后可以创建动态复选框。到现在为止还挺好。创建复选框时，可以编辑或删除复选框。问题是“删除图像”和“编辑段落”不会放在直线垂直线上。相反，它们通过向左侧移动而以交错的方式放置。您可以在下面的图片中看到问题。

如何避免这种情况？

JQuery的：

function addCheckbox(name, status) {
        status = status || false;

        var container = $('#divboxs');
        var inputs = container.find('input');
        var id = inputs.length + 1;
        var data = {
            status: status,
            name: name
        };

        var div = $('<div />', { class: 'allcheckbox' });
        $('<input />', {
            type: 'checkbox',
            id: 'cb' + id,
            value: name
        }).prop('checked', status).on('change', function () {
            data.status = $(this).prop('checked');
            data.name = $(this).val();
        }).appendTo(div); /* set checkbox status and monitor changes */

        $('<label />', {
            'for': 'cb' + id,
            text: name
        }).appendTo(div);

        var $trashImage = $('<img />', {
            "src": "http://www.seniorclassaward.com/systemadmin/extensions/fieldtypes/ngen_file_field/images/trash-icon.gif",
            "class": "removeCheckBoxDialog",
            "for": "cb" + id
        }).appendTo(div);

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

        div.appendTo(container);

        container.data('checkboxes').push(data);
    }

CSS：

.removeCheckBoxDialog, .editCheckBox {
    margin-top:3px;
    display: inline;
    float: right;
}
.editCheckBox {
    cursor: pointer;
    color: GrayText;
    font-size: small;
    margin-right:8px;
}

Live Demo

Answer 1

你的div绊倒它们的余量。

.editCheckBox {
    float: right;
    margin: 0;
    line-height: 20px;
}

这在我的浏览器上工作正常。您还可以使用box-sizing:border-box;

填充填充和边距

交错图像和段落的问题

1 个答案: