필드를 레이블과 함께 1 개의 직선 수평선으로 정렬해야합니다. 일반적으로 HTML에서이 문제를 수정하지만 수정할 수 없으므로 CSS로 수정해야합니다.
이것은 jsfiddle 데모입니다 : http://jsfiddle.net/83hxF/
내 HTML :
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display: none;"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
내 CSS :
#field_21770004 {
width: 150px;
}
#field_21927140 {
position: absolute;
top: 10px;
left: 250px;
}
#field_21769174 {
position: absolute;
top: 10px;
left: 350px;
}
이를 수행 할 수있는 몇 가지 방법이 있습니다. 수직 또는 수평으로 정렬하십시오.
HTML :
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error"></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error"></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error"></div>
CSS :
#field_21770004 {
width: 150px;
display:inline;
}
데모 : http://jsfiddle.net/83hxF/4/
HTML :
<label for="field_21770004">name</label>
<input id="field_21770004" type="text" title="Please fill out this field." placeholder="" name="fields[21770004]"></input>
<div id="field_21770004_errors" class="validation error" style="display:none";></div>
<label for="field_21927140">depart</label>
<select id="field_21927140" title="Please fill out this field." placeholder="" name="fields[21927140]"></select>
<div id="field_21927140_errors" class="validation error" style="display:none";></div>
<label for="field_21769174">platform</label>
<select id="field_21769174" title="Please fill out this field." placeholder="" name="fields[21769174]"></select>
<div id="field_21769174_errors" class="validation error" style="display:none";></div>
CSS :
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
데모 : http://jsfiddle.net/83hxF/5/
#field_21770004 {
width: 150px;
}
#field_21927140 {
top: 10px;
left: 250px;
}
#field_21769174 {
top: 10px;
left: 350px;
}
#field_21770004_errors{
display:none;
}
#field_21769174_errors{
display:none;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다