为什么这个 div 不使用 css 移动？答案

【问题标题】：Why doesn't this div move using css?为什么这个 div 不使用 css 移动？
【发布时间】：2019-09-01 02:56:35
【问题描述】：

我在 div 中有一个表单。我想将 div 向右移动，如果我使用这样的内联样式，我可以这样做：

<div class="joinform-page" style="margin-left: 30%;>

我想在 css 中使用 margin-left: 30% 来移动它，而不是作为内联样式，因为内联样式使媒体查询更加困难。但它忽略了我在 CSS 中所做的任何边距更改。

这是完整的 html：

<div class="joinform-page">
  <div class="form">
    <form action="data_in.php" method="post" name='data_in' id='data_in'>

      <input type="text" placeholder="Email" name="email_field" maxlength="60">
      <input type="text" placeholder="First Name (optional)" name="firstname"   maxlength="50">
      <input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">

      <div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
      <div><input type="hidden" id="comments" name="comments" value="none"></div>

      <button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25);  text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>

     <div style="padding-left:0%;">
     <label class="container">
     <span class="betajoinpage_cbx">Add me to your list</span>
     <input type="hidden" name="custom_checkbox" value="No">
     <input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked"  value="Yes"><span class="checkmark" style="color:blue;"></span>
     </label></div><br>

</form>
</div>
</div>

这里是相关的 css 类：

.joinform-page {
  width: 80%;
  padding: 0% 0 0;
  margin-top: -2.5%;
  margin-left: 30%; }

当我在css中使用margin-left时，为什么这个div不移动，。不是作为内联样式。

感谢您的帮助。

【问题讨论】：

标签： html css

【解决方案1】：

实际上它使用的是同一段代码。

如果它仍然不起作用，则可能是父元素的样式或同一元素的另一种样式。

【讨论】：

是的，我刚刚发现在不同的css文件中使用了相同的类名，导致类冲突。四分钟后，我可以接受你的回答（堆栈溢出规则）。

【解决方案2】：

上面的 CSS 可以正常工作。请确保您的 CSS 已正确导入，如下所示：

<!-- Where FILE_NAME is the name of your .CSS file --> 
<link rel="stylesheet" type="text/css" href="FILE_NAME.css">

.joinform-page {
  width: 80%;
  padding: 0% 0 0;
  /*margin-top: -2.5%;*/
  margin-left: 30%;
}

<div class="joinform-page">
  <div class="form">
    <form action="data_in.php" method="post" name='data_in' id='data_in'>

      <input type="text" placeholder="Email" name="email_field" maxlength="60">
      <input type="text" placeholder="First Name (optional)" name="firstname" maxlength="50">
      <input type="text" placeholder="Last Name (optional)" name="lastname" maxlength="50">

      <div><input type="hidden" id="password" name="password" value="pwdtemp"></div>
      <div><input type="hidden" id="comments" name="comments" value="none"></div>

      <button class="btn_class" style="color:rgb(255,255,255); background-color:rgb(25,25,25);  text-align:center;" id="btn_submit" onclick="GetDate();">Submit Form</button><br><br><br>

      <div style="padding-left:0%;">
        <label class="container">
     <span class="betajoinpage_cbx">Add me to your list</span>
     <input type="hidden" name="custom_checkbox" value="No">
     <input type="checkbox" id="ckbx" name="custom_checkbox" checked="checked"  value="Yes"><span class="checkmark" style="color:blue;"></span>
     </label></div><br>

    </form>
  </div>
</div>

【讨论】：

请看我下面的评论。 @Miroslav Glamuzina。我发现有一个阶级冲突。感谢您的回复。