Question

我有这个表单，我无法编辑：

<body>
<form action="" method="post" class="adverts-form adverts-form-aligned">
    <fieldset>
        <div class="adverts-control-group adverts-field-text adverts-field-name-adverts_eventLength ">
            <label for="adverts_eventLength">Durata evenimentului</label>
            <span class="ui-spinner ui-corner-all ui-widget ui-widget-content">
                <input name="adverts_eventLength" id="adverts_eventLength" aria-valuemin="1" aria-valuemax="999" autocomplete="off" class="ui-spinner-input" role="spinbutton" type="text">
            </span>
        </div>

        <div class="adverts-control-group adverts-field-select adverts-field-name-adverts_eventUnits ">
            <label for="adverts_eventUnits">&nbsp;</label>
                <select id="adverts_eventUnits" name="adverts_eventUnits" style="">
                    <option value="zile">zile</option>
                    <option value="săptămâni">săptămâni</option>
                    <option value="luni">luni</option>
                    <option value="ani">ani</option>
                </select>
        </div>
    </fieldset>
</form>
</body>

我希望水平对齐两个表单DIV，但保持第一个DIV标签的位置和宽度不变。有没有办法用CSS做到这一点？

这是工作（已解决）的解决方案：https://jsfiddle.net/iuriemalai/cp7kvLrw/32/

Answer 1

你可以漂浮它。

.adverts-form-aligned .adverts-control-group > label {
    float:left;
    width: 30%;
}
.adverts-form input[type="text"] {
    width: 60%;
    float:left;
}

Answer 2

使它像

.adverts-form-aligned .adverts-control-group > label {
    display: inline-block;
    width: 30%;
}
.adverts-control-group {
  float: left;
}
.adverts-form input[type="text"] {
    width: 60%;
}

Answer 3

这是帮助解决我的问题的CSS代码：

body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength {
    overflow: initial;
}

.adverts-form.adverts-form-aligned .adverts-control-group.adverts-field-text.adverts-field-name-adverts_eventLength label,
.adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventLength .ui-widget.ui-widget-content {
    float: left;
}

body .adverts-form.adverts-form-aligned .adverts-field-name-adverts_eventUnits {
    clear: initial;
}

body .adverts-form .adverts-field-name-adverts_eventUnits > label {
    display: none;
}

body .adverts-form .adverts-field-name-adverts_eventUnits > #adverts_eventUnits {
    width: 112px;
}

使用CSS水平对齐标签和两个DIV

3 个答案: