html - 在标签下输入而不更改html

Question

我有以下使用CORS协议注入的html。我在email_ver_input-label下用id为email_ver_input_label的输入进行输入。

<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规则轻松地做到这一点：

#email_ver_input_label {
    display: block!important;
}

问题是，如果我设置了!important，则此标签将以以前的状态显示。 label的先前状态具有style="display: none;"

无论如何，不​​使用JavaScript就能达到这个目标吗？
这是两个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>