问题描述
我有以下代码，它是一种注册表单，但凭据与其旁边的框之间的空间不规则。常规，我的意思是一个凭据与其框和另一个凭据与其框之间的空间不规则。
<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',serif;
}
legend {
font-family: 'Times New Roman',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> 标签并给出空格，但它们也是不规则的。这是我的尝试：
<html>
<head>
<title>My first code</title>
<style>
h1 {
color:blue;
font-family:'Times New Roman',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>谁能告诉我如何使空间规则？
解决方法
好吧，使用 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',serif;
}
legend
{
font-family: 'Times New Roman',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>这很容易实现，并且有多种解决方案。 我所做的是将 float 的输入标签属性添加到右侧并添加 margin-right。
<html>
<head>
<title>My first code</title>
<style>
h1 {
color:blue;
font-family:'Times New Roman',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',serif;
}
legend {
font-family: 'Times New Roman',serif;
}
input {
text-indent: 30%;
float: right;
margin-right: 40%;
}
</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>