<form> 水平显示元素

Question

我在学习 html 并尝试创建非常简单的登录页面
因为我在旁边使用 php 我使用表格稍后调用 php
但后来我创建了表单，但一些输入显示了它们
在一行中彼此相邻，而不是在其他行之上
代码：

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <title>CAW - Logowanie</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <form id="login_form" method="post">
        <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/>

        <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;"/>

        <input type="submit" value="Zalogój się"/>
    <form>

</body>
</html>

它看起来如何：

我的期望：

Answer 1

我在父元素中使用了 display: grid;（在本例中为 <form>）

并且会自动像你想要的那样

<form style="display: grid;" id="login_form" method="post">
  <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;" />

  <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;" />

  <input type="submit" value="Zalogój się" />
</form>

Answer 2

    <!DOCTYPE HTML>
    <html lang="pl">
    <head>
        <meta charset="utf-8"/>
        <title>CAW - Logowanie</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    
        <form id="login_form" method="post">
            <input type="text" name="login" placeholder="E-Mail" style="margin: 5px 5px 5px 5px;"/><br>
    
            <input type="password" name="passwd" placeholder="Hasło" style="margin: 5px 5px 5px 5px;"/><br>
    
            <input type="submit" value="Zalogój się" style="margin: 5px 0 0 5px"/>
        <form>
    
    </body>
    </html>

Answer 3

您需要做的只是将输入和按钮分别包装在一个标签中，并提供空白 tp div，而不是输入元素。

检查以下代码

    <form id="login_form" method="post">
            <div style="margin-bottom: 10px;"><input type="text" name="login" placeholder="E-Mail"/></div>
            <div style="margin-bottom: 10px;"><input type="password" name="passwd" placeholder="Hasło"/></div>
            <div><input type="submit" value="Zalogój się"/></div>
<form>

Answer 4

有多种方法可以获得您要查找的结果。我在下面列出了一些比较常见的：

方法一：显示网格

就像我之前说过的，将 grid 的 display 应用于 form 元素将导致 form 中的内容按列顺序显示默认。但是，这确实会导致将所有内容都拉伸到整个表单宽度的不幸结果。

.form-grid {
  display: grid;
}

.form-grid input {
  margin: 5px;
}

<!-- Display Grid -->
<form id="login_form" method="post" class="form-grid">
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

如果元素拉伸到全宽不是您想要的，但您仍想使用 display: grid;，您可以在表单中使用额外的内容框来防止这些元素拉伸：

.form-grid {
  display: grid;
}

.form-grid input {
  margin: 5px;
}

<!-- Display Grid with Inner Boxes -->
<form id="login_form" method="post" class="form-grid">
  <div>
    <input type="text" name="login" placeholder="E-Mail"/>
  </div>
  <div>
    <input type="password" name="passwd" placeholder="Hasło"/>
  </div>
  <div>
    <input type="submit" value="Zalogój się"/>
  </div>
<form>

这会导致更接近您提供的屏幕截图。

方法二：显示弹性+弹性流列

您可以使用的第二种方法是 display: flex;，其中 flex-flow 属性设置为 column。这利用了 display: flex 的灵活性并将其中的元素垂直对齐：

.form-flex {
  display: flex;
  flex-flow: column;
  
  /* additionally you can add this to keep the full width issue from happening */
  align-items: start;
}

.form-flex input {
  margin: 5px;
}

<!-- Display Flex + Column -->
<form id="login_form" method="post" class="form-flex">
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

方法 3：显示块输入

您可以使用的第三种方法是在表单中为每个输入提供 display: block 属性:

.form-block-inputs input {
  display: block;
  
  margin: 5px;
}

<!-- Display Block Inputs -->
<form id="login_form" method="post" class="form-block-inputs">
  <input type="text" name="login" placeholder="E-Mail"/>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <input type="submit" value="Zalogój się"/>
<form>

方法 4：坏方法

从技术上讲，您可以使用的最后一种方法（尽管我强烈建议您不要这样做）是在每次输入后添加一个换行符（使用 <br> 标记）。虽然这在技术上确实实现了您正在寻找的结果，但它是 hacky，如果您需要进一步扩展此表单或在其他屏幕尺寸上显示它，可能会导致问题。

#login_form input {
  margin: 5px;
}

<!-- The Bad One -->
<form id="login_form" method="post">
  <input type="text" name="login" placeholder="E-Mail"/>
  <br>
  <input type="password" name="passwd" placeholder="Hasło"/>
  <br>
  <input type="submit" value="Zalogój się"/>
<form>

希望这对您有所帮助。如果您需要进一步说明这些问题，请告诉我！

<form> 水平显示元素

<form> displaying elements horizontally

html

css

forms

方法一：显示网格

方法二：显示弹性+弹性流列

方法 3：显示块输入

方法 4：坏方法