我有一些无法更改的 WP Members 插件生成的 html，并且在样式设置方面遇到问题。
<div class="button_div">
<input name="rememberme" type="checkbox" id="rememberme" value="forever">
" Remember Me "
<input type="submit" name="submit" value="LogIn" class="buttons">
</div>
我需要将第一个输入复选框和“记住我”文本移到左侧，但只能单独针对复选框，或使用 Sass/CSS 定位整个 button_div。有没有一种方法可以使用 Javascript 或其他技术在不移动提交按钮的情况下移动复选框和记住我的文本？
最佳答案
由于您无法编辑原始 HTML，我已经更新了我的答案。我提出的解决方案使用 javascript 来覆盖原始 HTML，您可以根据需要设置样式。
试试这个:
<!-- Your original HTML. -->
<div class="button_div">
<input name="rememberme" type="checkbox" id="rememberme" value="forever">" Remember Me "
<input type="submit" name="submit" value="LogIn" class="buttons">
</div>
<!-- A script that replaces the button_div contents with HTML that you should be able to work with. -->
<script>
divs = document.getElementsByClassName('button_div');
[].slice.call(divs).forEach(function(div) {
div.innerHTML = '<div id="container"><div class="checkbox_div"><input name="rememberme" type="checkbox" id="rememberme" value="forever">" Remember Me "</div><div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons"></div></div>';
});
</script>
<!-- An example of how you might style your elements. -->
<style type="text/css">
.checkbox_div {
position: relative;
top: 100px;
left: 100px;
}
.button_div {
position: relative;
left: 20px;
}希望这对您有所帮助。
*更新: 对于这篇文章的 future 读者，我想弄清楚这是如何工作的——因为这看起来有点神秘。 (了解这只是解决此问题的一个示例。)
- 首先，我们从 getElementsByClassName(class) 中得到一个类数组对象，并将其分配给 div。
- 接下来我们从 div 创建一个数组([] 只是新数组的简写)，这样我们就可以使用 forEach 进行循环。 (我们必须这样做，因为 getElementsByClassName() 返回一个“类数组”对象而不是实际数组。也就是说，div 没有可用的 forEach 方法。)
- 对于新数组中的每个元素，我们更新 HTML。
这里有一些其他的引用资料:
关于javascript - 在 div 之间移动 html 而不会干扰 Wordpress 表单生成代码中的底部 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34427864/