HTML 在 div 标签中包含没有多余空格的文本

Question

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

上图中我的登录表单右对齐，周围有一个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>

Answer 1

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

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

Answer 2

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

此外，尽量不要使用 <br> 来打断 html 元素。您可以为此在元素上设置 margin/padding 。

HTML 在 div 标签中包含没有多余空格的文本

HTML enclose text with no extra whitespace in div tag

html

css

removing-whitespace