Question

我在放置Image和CheckBox时遇到问题。它们以交错的方式放置。我希望它们被放置在一条直线上。您可以在下面的图片中看到问题。

HTML：

<div id="modalDialog">

        <form>
            <hr/><br/>

            <label>Add checkBox</label>
            <br />

            <input type="text" id="checkBoxName" />
            <input type="button" id="btnSaveCheckBox" value="_Ok" />
            <br />

        </form>

    </div>

Jquery的：

$(function () {

        $('#modalDialog').dialog({
            modal: true,
            height: 600,
            width: 500,
            position: 'center'
        });

    $("#datepicker").datepicker({showWeek:true, firstDay:1});

    // Add a new checkBox
    $('#btnSaveCheckBox').click(function () {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

    function addCheckbox(name) {
        var container = $('#modalDialog');
        var inputs = container.find('input');
        var id = inputs.length + 1;

        $('<input />', { type: 'checkbox', class: 'allcheckbox', id: 'cb' + id, value: name }).appendTo(container);
        $('<label />', { 'for': 'cb' + id, class: 'allcheckbox',  text: name }).appendTo(container);


   $('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog" }).appendTo(container);    

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


    } 

    $('#modalDialog').on('click','.removeCheckBoxDialog', function (e) {            
        $('#'+$(this).prev().attr('for')).remove();
        $(this).next('br').remove();
        $(this).prev().remove();
        $(this).remove();
    }); 


});

CSS：

/*Style of a Modal Dialog*/
#modalDialog {
    display: none;
    background-color: white;
    border: solid black 2px;
    border-radius: 10px;
    overflow: auto;
    box-shadow: 7px 7px 7px #828282;
}

.removeCheckBoxDialog {    
    border: 1px solid Red !important;
    cursor:pointer;
    vertical-align: bottom;
    display: inline-block;
    margin-left:90%;
}

Answer 1

<强> CSS

.removeCheckBoxDialog {    
    border: 1px solid Red !important;
    cursor:pointer;
    vertical-align: bottom;
    display: inline-block;
    float:right;
    /*margin-left:90%;*/
}

br{
    clear:both;
}

<强> DEMO

交错图像和CheckBox的问题

1 个答案: