HTML div元素中的对齐问题

Question

I have an html form which has been styled using bootstrap. One field has an alignment issue. I tried different things but it doesn't seem to workout.

The code is as below for the relevant area:

<div class="row">
    <div class="col-md-8">
        <div class="box">
            <div class="box-body">
                <div class="form-group">
                <label for="email">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email"
                       value="<?php echo(!empty($action_array['data'][0]['email']) ? $action_array['data'][0]['email'] : "") ?>"
                       placeholder="Enter E-Mail" maxlength="255">
            </div>
            <div class="form-group required">
                <label for="lAddress" class="control-label">Address</label>
                <input type="text" class="form-control" id="lAddress" name="lAddress"
                       value="<?php echo(!empty($action_array['data'][0]['address']) ? $action_array['data'][0]['address'] : "") ?>"
                       placeholder="Enter Personnel Address" maxlength="250" required>
            </div>

            <div class="form-group">

                <label for="lAddress" class="control-label">Similar Names</label>

                <div class="box-body">
                    <div class="form-group">
                        <label for="similar-name-select" class="sr-only">Similar Names</label>

                        <div class="col-md-12">
                            <select  name="similarNames[]" id="similar-name-select"
                                    class="form-control select2"
                                    data-placeholder="Enter similar names" multiple="multiple"
                                    style="width: 100%">

                                <?php
                                if (!empty($similar_names_arr)) {
                                    foreach ($similar_names_arr as $similar_name) {
                                        echo('<option value="' . $similar_name . '" selected="selected">' . $similar_name . '</option>');
                                    }
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

the issue is displayed in here

Answer 1

You have inlined your form-group, you have multiple labels, try:

<div class="col-md-8">
    <div class="box">
        <div class="box-body">
                <div class="form-group">
                <label for="email">E-Mail</label>
                <input type="email" class="form-control" id="email" name="email"
                       value="<?php echo(!empty($action_array['data'][0]['email']) ? $action_array['data'][0]['email'] : "") ?>"
                       placeholder="Enter E-Mail" maxlength="255">
            </div>
            <div class="form-group required">
                <label for="lAddress" class="control-label">Address</label>
                <input type="text" class="form-control" id="lAddress" name="lAddress"
                       value="<?php echo(!empty($action_array['data'][0]['address']) ? $action_array['data'][0]['address'] : "") ?>"
                       placeholder="Enter Personnel Address" maxlength="250" required>
            </div>

            <div class="form-group">
            <label for="similar-name-select">Similar Names</label>

                <select  name="similarNames[]" id="similar-name-select"
                        class="form-control select2"
                        data-placeholder="Enter similar names" multiple="multiple"
                        style="width: 100%">

                    <?php
                    if (!empty($similar_names_arr)) {
                        foreach ($similar_names_arr as $similar_name) {
                            echo('<option value="' . $similar_name . '" selected="selected">' . $similar_name . '</option>');
                        }
                    }
                    ?>


                </select>
            </div>
        </div>
    </div>

</div>

demo: https://jsfiddle.net/DTcHh/38467/