Question

我在两个不同的页面上使用相同的表单。在第一个上，每个div都在所需位置整洁。在第二页上，有一个仅在更改后出现的选择（jquery触发器），这会导致它下面的div首先出现在右边，但是在触发后它在左边移动。我喜欢包含单选按钮的div始终位于左侧，就像它在第一页上一样。我想修复的部分是#center-add-new-event-form .container-field input[type=radio]。

这是css。

＆＃13;

#center-add-new-event-form,
#center-add-new-event-form * {
    box-sizing: border-box;
}

#center-add-new-event-form {
    padding: 20px 10px 0px;
}

#center-add-new-event-form .container-field {
    width: 50%;
    float: left;
    padding: 0 10px;
    margin-bottom: 20px;    
    vertical-align: top;    
}

#center-add-new-event-form .container-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

#center-add-new-event-form .container-field input[type=text],
    #center-add-new-event-form .container-field select {
    height: 34px;
    border: 1px solid #ddd;
    padding: 0 7px;
    display: block;    
    width: 100%;
}

#center-add-new-event-form .container-field input[type=radio]
{
    height: 34px;
    border: 1px solid #ddd;
    padding: 0 7px;
    display: block;    
    width: 100%;
}


#center-add-new-event-form .center-error-message {
    font-size: 0.9em;
    color: darkred;
    display: block;
    margin-left: 1px;
}

.center-event-actions {
    border-top: 1px solid #ddd;
    padding: 20px 20px 15px;
    text-align: right;

}

.clearfix:before,.clearfix:after {  
    display: table;  
    content: " ";
}

.clearfix:after {
    clear: both;
}


@media screen and (max-width: 767px) {
    #center-add-new-event-form .container-field {
        float: none;
        width: 100%;
    }   
}

＆＃13;

<form id="center-add-new-event-form" class="clearfix">



    <div class="container-field" style="width: 100%">
            <label></label>
            <div id="center-request-details">

            </div>
        </div>

        <div class="container-field">
            <label for="teaching-requests"></label>
            <select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all">
                <option value=""></option>

                        <option value=""></option>
            </select>
            <span class="center-error-message"></span>
        </div>
        <div class="container-field">
            <label for="request-date"></label>
            <input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all">
            <span class="center-error-message"></span>
            </div>
        </div>


    <div class="container-field">
        <label for="teaching-start-time"></label>
        <input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
        <span class="center-error-message"></span>
    </div>

    <span class="clearfix"></span>

    <div class="container-field">
        <label for="teaching-end-time"></label>
        <input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all">
        <span class="center-error-message"></span>
    </div>

    <div class="container-field">
        <label for="teaching-teacher"></label>
        <div id='contanier-teacher-selection'>

        </div>
        <span class="center-error-message"></span>

    </div>           
    <div class="container-field pull-left" align="left">
        <label for="recursive-events" align="left">
        <input type="radio" align="left" name="recursive" value="daily"/>Daily
        <input type="radio" align="left" name="recursive" value="weekly"/>Weekly
        <input type="radio" align="left" name="recursive" value="monthly"/>Monthly
        </label>
    </div>
    <span class="center-error-message"></span>        
</form>

<div class="center-event-actions">
    <button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button>
    <button id="add-new-event" class='button button-primary'></button>
</div>

＆＃13;

Before After

Answer 1

看起来它是由container-field＆lt; = width：50％和float引起的所以当这个div出现时，它会出现在最后一个旁边解决方案添加

String

在带有单选按钮的元素之前

Answer 2

这可能有效：

#center-add-new-event-form .container-field input[type=radio]:before
{
    height: 34px;
    border: 1px solid #ddd;
    padding: 0 7px;
    display: block;    
    width: 100%;
}

#center-add-new-event-form .container-field input[type=radio]:after
{
    height: 34px;
    border: 1px solid #ddd;
    padding: 0 7px;
    display: block;    
    width: 100%;
    float: right;
}

修复表格中的div位置

2 个答案: