對齊的標籤和水平與CSS

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

來源

2017-03-15 Iurie

你可以靜靜地飄浮它。

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

來源

2017-03-15 20:51:09 BioGenX

使它像

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

來源

2017-03-15 20:57:10 AxM

您可以爲您解答一些解釋？ – mhatch

@biogenx我試圖減少我的問題中的代碼大小，但這也降低了我有機會接受工作解決方案的答案。無論如何，我收到了很好的建議。非常感謝你！我用更完整的代碼更新了我的問題，並且發佈了我自己的答案。 – Iurie

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

來源

2017-03-19 16:08:52 Iurie

對齊的標籤和水平與CSS

回答

相關問題