html - 表单上留下的边距会在右侧创建一个额外的空白区域-6ren

html - 表单上留下的边距会在右侧创建一个额外的空白区域

转载作者：行者123 更新时间：2023-11-28 14:08:09

25

4

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

最佳答案

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

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

关于html - 表单上留下的边距会在右侧创建一个额外的空白区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56924122/

25

4

0

文章推荐： javascript - 基于 routerLinkActive 的 Angular 高亮

文章推荐： java - Webfont 提供在表单帖子上下载

文章推荐： javascript - 无法从数据属性解析 JSON

文章推荐： css - 动画 : move right aligned text to the right and align left

javascript onclick 留下
目前，我在单击我的正文时打开一个新选项卡，但它将焦点更改为子窗口。但我想通过留下窗口来做到这一点，这样弹出窗口就不会被阻止，并且我可以将焦点放在当前窗口上。以下代码当前正在运行 /** * For
html - 线性渐变不覆盖整个图像(留下 ~1px 边框)
我有一个带有线性渐变的 css 背景图像。 CSS 代码: .footer-about { display: flex; align-items: center; justif
node.js - 留下 Node 获取响应而不读取流
在服务中包含以下代码(假设在快速端点上): async function (res, req, next) { const fetch = require('node-fetch'); awa
c++ - DrawIconEx 留下 mask 伪影
我正在使用 IImageList 和 SHGetFileInfo 为任何给定路径提取巨型图标。一旦我有了它，然后我使用 DrawIconEx 将 HICON 渲染到 HBITMAP 中，最终使用 GD
Python 留下 10% 具有最大权重的分支 NetworkX 图
我有图表并计算了网络密度，现在我应该只保留具有最大权重的分支(网络密度的前 10%，例如 200 中权重最大的 20 个分支)。我找不到该怎么做？最佳答案这个问题有点令人困惑，因此，如果稍后出现更
jquery - 用 jquery 留下 body 痕迹
我一直在尝试使用 jquery 创建一种效果，当您将鼠标移到一个 div 上时，整个 body 都会移动，并沿着它经过的点留下一条轨迹。我创建了一个可以使整个 body 移动的功能，但我找不到离开轨迹
css - 如何删除放大和缩小传单 map 留下 gps 图标
我想在桌面上显示放大和缩小图标(控件)，而仅在移动设备上浏览时显示 gps 图标。我正在使用这个 css https://unpkg.com/leaflet@1.1.0/dist/leaflet.cs
c - qsort 比较器函数不会对整个数组进行排序(留下 1 个元素)
相关代码(索引为数组大小): typedef struct elemento { unsigned long linha; unsigned long coluna; doub
javascript - Chrome jquery .animate() 留下 'movement' 行
我有一个 div，因此当我单击时，它会切换为展开或缩回。它在所有浏览器上都运行良好，尽管有一点让我很感兴趣。在谷歌浏览器上，当它缩回时，它会在运动中留下细线。 www.rezoluz.com/logi
c++ - CreateDIBSection 留下 'Not enough storage' 错误，但似乎仍然有效
每当我的应用程序尝试通过调用 CreateDIBSection() 或使用 LR_CREATEDIBSECTION 标志调用 LoadImage() 来创建 DIB 部分时，它似乎都会成功返回。它返回
angularjs - 将 Protractor 测试移至 async/await(留下 selenium 控制流)
我想在 Protractor 测试中脱离 Selenium 控制流。以下是我迄今为止遇到的步骤和问题: 1。逐个测试禁用它我的第一个想法是使用 SELENIUM_PROMISE_MANAGER 以
asp.net-core-mvc - .NET Core : Process. Start() 留下子进程
我正在构建一个部署在 CentOS 7.2 上的 ASP.Net Core (netcore 1.1) 应用程序。我有一个通过 System.Diagnostics.Process 调用外部进程(也
php - <script> 标签 - 留下/创建空间(<script>)会减少 XSS 的威胁吗？
我正在为我的网站创建一个聊天小部件。用户将能够输入纯文本 - 没有 html。为了消除 HTML 标记并允许用户使用“”，我正在接受他们的输入并在用户屏幕的输入上使用 strip_tags() 和输

首页

博学

6Ren·AI

商城

html - 表单上留下的边距会在右侧创建一个额外的空白区域