HTML 在 div 标签中包含没有额外空格的文本答案

【问题标题】：HTML enclose text with no extra whitespace in div tagHTML 在 div 标签中包含没有额外空格的文本
【发布时间】：2020-05-12 03:22:56
【问题描述】：

免责声明：我对 HTML 很陌生。我知道这（很可能）会被标记为重复，但是我无法说出和搜索，所以我无法为了找到我需要的信息，所以我来问这个关于堆栈溢出的非常简单的问题。我有一个带有 div 的快速 HTML 登录表单：

在上面给出的图像中，我的登录表单向右对齐，并且它周围有一个 2px 的黑色边框，是否可以使边框只包含登录表单而不是左侧的多余空格。

想要的结果：

谢谢！代码：

<!DOCTYPE html>
<html>
<head>
    <style>
        html body {
            margin:20px;
        }
        #login-form{
            padding:30px;
            border:2px solid black;
        }
        #title-login{
            font-family:Arial,sans-serif,serif;
            margin-right:235px;
            
        }
        .inpt{
            border-radius:3px;
            width:235px;
            height:30px;
            font-size:20px;
            border: 1px solid black;
            margin:2px;
        }
        .userinpt{
            width:315px;
        }
        .passwdinpt{
            margin-right:83px;
        }
        
        .login-button{
            background-color: transparent;
            color: black;
            border: 1.5px solid #008CBA;
            padding: 13px 26px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            transition-duration: 0.4s;
            cursor: pointer;
            border-radius:5px;
            margin-right:210px;
        }
        .login-button:hover {
            background-color: #008CBA;
            color: white;
        }
        #ask-reg{
            font-family:sans-serif;
            font-weight:lighter;
            margin-right:10px;
        }
        #link-reg{
            
        }
        .link {
            color: #0099ff;
            text-decoration: none;
        }

        .link:hover {
            color: #007acc;
            transition-duration: 100ms;
            transition-property: all;
            border-bottom: 1.3px solid black;
            padding: 0 0 0.8px;
            opacity:100%;
        }
        .link:active {
          color: #99d6ff;
        }
    </style>
</head>
<body>
    <div align="right" id="login-form">
    <h1 id="title-login" >Login</h1>
    <form action="subindex.php" method="post" >
      <input type="text" class="inpt userinpt"  name="usrname" placeholder="Username or E-mail"><br>
      <input type="password" class="inpt passwdinpt" name="passwd" placeholder="Password"><br><br>
      <button type="sumbit" class="login-button" name="logn">Confirm</button><br>
    </form>
    <br>
    <p id="ask-reg" >If you do not have an account, register <a id="link-reg" class="link" href="register.html">here</a>.</p>
    </div>


<script>

</script>

</body>
</html>

【问题讨论】：

请提供代码 sn-p 以便我们查看您所做的工作

标签： html css removing-whitespace

【解决方案1】：

border 将始终围绕元素 width 和 height，包括 padding。更改表单的width，如果您希望它与正确使用对齐：

form {
    width: 30%;
    margin-left: auto;
}

【讨论】：

【解决方案2】：

最简单的方法是在#login-form 元素上设置width 和float:right 属性。这是 repl.it 上的一个示例：https://repl.it/@TrishaAguinaldo/example-border

另外，尽量不要使用<br> 来破坏html 元素。您可以为此设置元素的边距/填充。

【讨论】：