表格左侧的边距在右侧创建一个额外的空白区域答案

【问题标题】：Margin left on form creates an extra white space on right side表格左侧的边距在右侧创建一个额外的空白区域
【发布时间】：2019-11-17 07:57:10
【问题描述】：

我使用 margin-left 属性定位了表单，但它添加了一个水平滚动条，在页面右侧创建了额外的空白区域。以下是我在上面使用的 CSS。

.form {
    width:100%;
    margin-left:35%;
    box-sizing: border-box;
}

如何去掉右边的空白？

编辑：

<!DOCTYPE html>
<html>
<head>
    <title>Forms</title>
    <script type="text/javascript" src="../js/script.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/forms.css">
</head>
<body id="formbody">
    <h3 class="formheader">create a new account</h3>
<form action="#" target="_self" class="form">
    <input type="text" name="firstname" class="input text" placeholder="firstname">
    <input type="text" name="lastname" class="input text" placeholder="lastname">
    <div class="genderholder">
        <h4 class="genderheader">Gender</h4>
        <label class="genderlabel">male <input type="radio" name="gender" class="input radio"></label>
        <label class="genderlabel">female <input type="radio" name="gender" class="input radio"></label>
        <label class="genderlabel">others <input type="radio" name="gender" class="input radio"></label>
    </div>
    <select class="input country">
        <option>Select a Country</option>
    </select>   
        <div class="holder">    
    <h4 class="dobheader">Date of birth</h4>
    <select id="day" class="input day">
        <option>Day</option>
    </select>
<select class="input month">
        <option>Month</option>
    </select>
    <select class="input year">
        <option>Year</option>
    </select>
</div>

<input type="email" name="email" class="input email" placeholder="email"> 

<input type="submit" name="signup" value="sign up" class="input submit">
</form>
</body>
</html>

【问题讨论】：

请发布您的html代码
@SaiManoj 添加了 html 代码。
我已经发布了答案。看看吧
可能有一些内部形式推动了额外的空间。你能提供所有其他类/css的小提琴或钢笔吗？

标签： html css

【解决方案1】：

试试这个代码

.form {
    max-width:100%;
    min-width:100%;
    margin-left:35%;
    overflow-x:hidden;
    box-sizing: border-box;
}

.body{
    max-width: 100%;
}

【讨论】：

那没有任何区别。

【解决方案2】：

我假设您正在尝试将表单置于页面的中心。如果是这样，这就是解决方案。

.form {
  width: fit-content;
  margin: 0 auto;
  box-sizing: border-box;
  
}
body{
max-width:100vw;
}

<!DOCTYPE html>
<html>

<head>
  <title>Forms</title>
  <script type="text/javascript" src="../js/script.js"></script>
  <link rel="stylesheet" type="text/css" href="../css/forms.css">
</head>

<body id="formbody">
  <h3 class="formheader">create a new account</h3>
  <form action="#" target="_self" class="form">
    <input type="text" name="firstname" class="input text" placeholder="firstname">
    <input type="text" name="lastname" class="input text" placeholder="lastname">
    <div class="genderholder">
      <h4 class="genderheader">Gender</h4>
      <label class="genderlabel">male <input type="radio" name="gender" class="input radio"></label>
      <label class="genderlabel">female <input type="radio" name="gender" class="input radio"></label>
      <label class="genderlabel">others <input type="radio" name="gender" class="input radio"></label>
    </div>
    <select class="input country">
      <option>Select a Country</option>
    </select>
    <div class="holder">
      <h4 class="dobheader">Date of birth</h4>
      <select id="day" class="input day">
        <option>Day</option>
      </select>
      <select class="input month">
        <option>Month</option>
      </select>
      <select class="input year">
        <option>Year</option>
      </select>
    </div>

    <input type="email" name="email" class="input email" placeholder="email">

    <input type="submit" name="signup" value="sign up" class="input submit">
  </form>
</body>

</html>

如果您想为您的代码提供解决方案。通过为父元素设置overflow-x:hidden 尝试以下操作

.form {
  width: 100%;
  margin-left: 35%;
  box-sizing: border-box;
}
body{
max-width:100vw;
overflow-x:hidden
}

【讨论】：

是的，我正在尝试使用边距使表单居中：自动；它没有用，这就是我使用margin-left的原因。不知何故，你的修复工作。谢谢！