Question

我有一些WP成员插件生成的html，我无法改变，而且造型有问题。

<div class="button_div">
    <input name="rememberme" type="checkbox" id="rememberme" value="forever">
        "&nbsp;Remember Me&nbsp;&nbsp;"
    <input type="submit" name="submit" value="LogIn" class="buttons">
</div>

我需要移动第一个输入复选框和＆＃34;记住我＆＃34;文本在左侧，但只能单独定位复选框，或者只能使用Sass / CSS定位整个button_div。有没有办法用Javascript或其他技术移动复选框和记住我文本而不移动提交按钮？

Answer 1

我已更新我的答案，因为您无法编辑原始HTML。我提出的解决方案使用javascript覆盖原始HTML，并根据您的需要设置样式。

试试这个：

<!-- Your original HTML. -->

<div class="button_div">
  <input name="rememberme" type="checkbox" id="rememberme" value="forever">"&nbsp;Remember Me&nbsp;&nbsp;"
  <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">"&nbsp;Remember Me&nbsp;&nbsp;"</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;
  }

希望这有帮助。

*更新：对于这篇文章的未来观众，我想清楚这是如何工作的 - 因为这看起来有点神秘。（理解这只是如何解决这个问题的一个例子。）

首先，我们从getElementsByClassName（class）获取一个类似数组的对象，并将其分配给div。
接下来我们从div创建一个数组（[]只是一个新数组的简写），以便我们可以使用forEach进行循环。（我们必须这样做，因为getElementsByClassName（）返回一个“类数组”对象而不是实际数组。即，div没有forEach方法。）
对于新数组中的每个元素，我们更新HTML。

以下是其他一些参考资料：

Answer 2

构建它的正确方法是将文本包装在可以使用类或. button_div input[type="checkbox"] + label定位的标签中，但我假设您无法更改HTML。因此，我唯一能解决这个问题的方法是将输入浮动到左侧，将按钮浮动到右侧，或者根据需要将按钮相对和右侧定位为多个px。使用媒体查询重新调整。这是我的解决方案，按钮上有一个浮动。

  .button_div{
      color:red;
      position:relative;
      left:-20px;
      right:auto;
      width:600px;
  }

  .btn{
     float:right;
  }

查看我的演示here

Answer 3

首先在id属性中有一个拼写错误。它应该是id="rememberme" 其次，当我们使用label时，最好使用input type="radio/checkbox" - 属性。所以我修改了这样的旅游代码

HTML 按钮＆amp;输入是同一行

<div class="button_div">
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label>
<input type="submit" class="pull-right" name="submit" value="LogIn" class="buttons">
</div>

以不同的方式

<div class="wrapper">
<div class="button_div">
<input name="rememberme" type="checkbox" class="pull-left" id="rememberme" value="forever"><label for ="rememberme">Remember Me</label>
</div>
<div class="button_div"><input type="submit" name="submit" value="LogIn" class="buttons">
</div> 
</div>

CSS

.button_div{
  width:500px;
  background:green;
  padding:10px;
}
.pull-left{
  float:left;
}
.pull-right{
  float:right;
}

WORKING DEMO

在div之间移动html而不会干扰Wordpress表单生成代码中的底部div

3 个答案: