如何水平对齐两个输入

Question

我目前是 css 和 html 的初学者。我正在尝试创建一个登录页面，但我无法对齐我的两个输入。我希望在文本输入的左侧添加标签“用户名：”和“密码：”，并移动输入。我有一些看起来像这样的东西：

我的代码如下： HTML 代码：

<!DOCTYPE html>
<link href='./index-style.css' rel='stylesheet'>
<head>
    <title>Site Guillaume Test</title>
</head>
<body>
    <div class="Loging">
        <h2>Login :</h2>
        <div class="Username-Password">
            <form>
                <label for="pseudo">Username :</label>
                <input type="text" name="pseudo" id="pseudo" placeholder="Enter Username" required>
                <br>
                <label for="password">Password :</label>
                <input type="password" name="password" id="password" placeholder="Enter Password" required>
            </form>
        </div>
    </div>
</body>

CSS：

div.Loging {
    background: url("./images/index-background.jpg") no-repeat center center;
    background-size: cover;
    height: 800px;
    text-align: center;
}

div.Username-Password input {
    padding: 5px; /* make it a bit bigger */
    margin-bottom: 10px; /* Add space between input fields */
    border: 1px solid #ccc;
    border-radius: 5px; /* Arrondi les angles */
}

我希望我的两个输入对齐，而不是像您在图像上看到的那样移动。

我尝试将我的输入与 CSS 上的 text-align、align-items、flex 或 grid 对齐，但没有任何效果。如果我输入“display: block;”，我就能设法让它们对齐。在我的CSS代码中，但它将标签放置在输入的顶部而不是左侧，这就是我想要的。我想我只是不明白它是如何工作的，我希望有人可以帮助我加深对 css 对齐的理解。

Answer 1

抱歉，我不知道你的问题，所以我想再问一下这个问题。你这是什么意思？

如何水平对齐两个输入

问题描述投票：0回答：1

1个回答

最新问题

如何水平对齐两个输入

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1