2017-03-15 101 views
0

两个div我有这种形式,我不能编辑:对齐的标签和水平与CSS

<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/

回答

1

你可以静静地飘浮它。

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

使它像

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

您可以为您解答一些解释? – mhatch

+0

@biogenx我试图减少我的问题中的代码大小,但这也降低了我有机会接受工作解决方案的答案。无论如何,我收到了很好的建议。非常感谢你!我用更完整的代码更新了我的问题,并且发布了我自己的答案。 – Iurie

0

这是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; 
}