html을 변경하지 않고 레이블 아래에 입력

Question

CORS 프로토콜을 사용하여 삽입 된 다음 HTML이 있습니다. 나는 label - email_ver_input_label 아래의 ID가 email_ver_input 인 입력을 받았다.

<label id="email_ver_input_label" for="email_ver_input" style="display: inline;">Verification Code</label> 
<input id="email_ver_input" type="text" placeholder="Verification Code" style="display: inline;" class="val-success"> 
<button id="email_ver_but_verify" class="verifyButton" type="button" style="display: inline;">Verify Code</button> 
<button id="email_ver_but_edit" class="editButton" type="button" style="display:none">Change e-mail</button> 
<button id="email_ver_but_default" class="defaultButton" type="button" style="display:none">Default</button> 

나는 쉽게 다음과 같은 CSS 규칙을 사용하여이 작업을 수행 할 수 있습니다 나는 !important을 설정하면

#email_ver_input_label { 
    display: block!important; 
} 

문제는, 다음이 레이블은 이전의 상태로 보여집니다. 이전 상태가 label 인 경우 style="display: none;"

어쨌든 자바 스크립트를 사용하지 않고이 목표를 달성 할 수 있습니까? 는 여기는 HTML 상태와 바이올린입니다 :

1-https://jsfiddle.net/Bonomi/96kfqryy/

2-https://jsfiddle.net/Bonomi/hgL0uuhn/1/

Answer 1

당신이 position:absolute

body { 
 
    position: relative 
 
} 
 
#email_ver_input { 
 
    position: absolute; 
 
    top: 30px; 
 
    left: 0 
 
}

<label id="email_ver_input_label" for="email_ver_input" style="display: inline;">Verification Code</label> 
 
<input id="email_ver_input" type="text" placeholder="Verification Code" style="display: inline;" class="val-success"> 
 
<button id="email_ver_but_verify" class="verifyButton" type="button" style="display: inline;">Verify Code</button> 
 
<button id="email_ver_but_resend" class="sendButton" type="button" style="display: inline;">Resend Code</button> 
 
<button id="email_ver_but_edit" class="editButton" type="button" style="display:none">Change e-mail</button> 
 
<button id="email_ver_but_default" class="defaultButton" type="button" style="display:none">Default</button>

를 사용하여이를 달성 할 수