如何使用 CSS/HTML 在文本和旁边的框之间添加常规 space？

Question

我有以下代码，它是一种注册表单，但证书和旁边的框之间的 space 不规则。常规是指一个凭证及其框与另一个凭证及其框之间的 space 是 不规则 .

<html>
    <head>
        <title>My first code</title>
        <style>
            h1 {
                color:blue;
                font-family:'Times New Roman', Times, serif;
                font-style: bold;
            }
            
            img {
                border-style:double;
                border-radius: 5px;
                border-color: blue;
            }

            p {
                color:blue;
                font-size: larger;
            }

            label {
                font-family: 'Times New Roman', Times, serif;
            }

            legend {
                font-family: 'Times New Roman', Times, serif;
            }
            
            input {
                text-indent: 30%
            }
        </style>


    </head>

<body>
   
    
        <form>
            <fieldset>
                <legend>Form:</legend>
                <label for="fname">First Name:</label>
                <input type="text" id="fname" name="fname"><br><br>
                <label for="lname">Last Name:</label>
                <input type="text" id="lname" name="lname"><br><br>
                <label for="Date of Birth">Date of Birth:</label>
                <input type="date" id="Date of Birth" name="Date of Birth"><br><br>                
                <label for="email">Email:</label>
                <input type="text" id="email" name="email"><br><br>
                <label for="ps">Password:</label>
                <input type="password" id="ps" name="email"><br><br>
                
            </fieldset>
        </form>
</body>
</html>

我最好的尝试是添加 <pre> 标签并给出 space，但它们也是不规则的。这是我的尝试：

<html>
    <head>
        <title>My first code</title>
        <style>
            h1 {
                color:blue;
                font-family:'Times New Roman', Times, serif;
                font-style: bold;
            }
            
            img {
                border-style:double;
                border-radius: 5px;
                border-color: blue;
            }

            p {
                color:blue;
                font-size: larger;
            }

            label {
                font-family: 'Times New Roman', Times, serif;
            }

            legend {
                font-family: 'Times New Roman', Times, serif;
            }
            
            input {
                text-indent: 30%
            }
        </style>


    </head>

<body>
   
    <pre>
        <form>
            <fieldset>
                <legend>Form:</legend>
                <label for="fname">First Name:</label>    <input type="text" id="fname" name="fname">
                
                <label for="lname">Last Name:</label>    <input type="text" id="lname" name="lname">
                
                <label for="Date of Birth">Date of Birth:</label>  <input type="date" id="Date of Birth" name="Date of Birth">
                
                <label for="email">Email:</label>        <input type="text" id="email" name="email">
                
                <label for="ps">Password:</label>     <input type="password" id="ps" name="email">
                
            </fieldset>
        </form>
    </pre>
    
</body>
</html>

谁能告诉我如何使 space 正常化？

Answer 1

这很容易实现，并且有多种解决方案。我所做的是添加到 float to the right and added margin-right.

的输入标签属性

h1 {
  color: blue;
  font-family: 'Times New Roman', Times, serif;
  font-style: bold;
}

img {
  border-style: double;
  border-radius: 5px;
  border-color: blue;
}

p {
  color: blue;
  font-size: larger;
}

label {
  font-family: 'Times New Roman', Times, serif;
}

legend {
  font-family: 'Times New Roman', Times, serif;
}

input {
  text-indent: 30%;
  float: right;
  margin-right: 40%;
}

<form>
  <fieldset>
    <legend>Form:</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="Date of Birth">Date of Birth:</label>
    <input type="date" id="Date of Birth" name="Date of Birth"><br><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br><br>
    <label for="ps">Password:</label>
    <input type="password" id="ps" name="email"><br><br>
  </fieldset>
</form>

Answer 2

嗯，使用 float 和 <br/> 并不是最好的方法。

使用 Flex 是更好的方法。

我也让它响应。

h1 
{
    color:blue;
    font-family:'Times New Roman', Times, serif;
    font-style: bold;
}
    
img 
{
    border-style:double;
    border-radius: 5px;
    border-color: blue;
}
     
p {
     color:blue;
     font-size: larger;
     }
     
label
{
    font-family: 'Times New Roman', Times, serif;
}

legend 
{
    font-family: 'Times New Roman', Times, serif;
}
form
{
    display:flex;
    flex-direction:column;
}
            
.input-container
{
    display:flex;
    flex-direction:row;
    margin-bottom:10px;
}
            
.input-container label
{
    width:100px;
    text-align:right;
    margin-right:10px;
}
              
.input-container input
{
    width:400px;
}
              
@media only screen and (max-width: 600px) {
.input-container 
{
    flex-direction:column;
}

.input-container label
{
    width:100%;
    text-align:left;
}
.input-container input
{
    width:100%;
}
}

<html>
    <head>
        <title>My first code</title>
    </head>
<body>
        <form>
            <fieldset>
            <legend>Form:</legend>
            <div class="input-container">
              <label for="fname">First Name:</label>
              <input type="text" id="fname" name="fname">
            </div>
            
            <div class="input-container">
               <label for="lname">Last Name:</label>
               <input type="text" id="lname" name="lname">
             </div>
             
             <div class="input-container">
               <label for="Date of Birth">Date of Birth:</label>
                <input type="date" id="Date of Birth" name="Date of Birth">   
              </div>
              
              <div class="input-container">
                <label for="email">Email:</label>
                <input type="text" id="email" name="email">
              </div>
              
              <div class="input-container">
                <label for="ps">Password:</label>
                <input type="password" id="ps" name="email">
              </div>

            </fieldset>
        </form>
</body>
</html>

如何使用 CSS/HTML 在文本和旁边的框之间添加常规 space？

How to add a regular space between text and the boxes next to them using CSS/HTML?

html

css

space

indentation