Question

我使用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>

Answer 1

尝试此代码

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

.body{
    max-width: 100%;
}

Answer 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
}

窗体上的左边距在右侧创建了额外的空白

2 个答案: