如何在HTML中对齐文本框？Age输入框需与Name、Email对齐

嘿，我明白你现在的困扰——明明设了相同宽度，输入框还是没法对齐，对吧？咱们一步步来修复这个问题：

问题根源分析 #

1. CSS属性缺少单位：你设置的width: 200和height:25没有单位（应该用px），浏览器无法正确识别，这会导致尺寸表现不符合预期。
2. 标签（label）布局混乱：Name、Email、Age的标签文本长度不同，且没有统一的布局规则，导致输入框的起始位置错位。
3. 小细节错误：#Survey-form的背景色值f0f0f0缺少开头的#，浏览器会忽略这个无效值。

修改后的完整代码 #

CSS 代码

#Title{ text-align: center; }
#description{ text-align: center; }
body{ background-color: #7FFFD4; }
#Survey-form{ 
  background-color: #f0f0f0; 
  text-align: center; 
  padding: 20px; /* 加个内边距让内容不贴边 */
}
.nameageemail { 
  margin: 0 auto;
  display: inline-block; /* 让容器居中对齐 */
  text-align: left; /* 内部内容左对齐，方便label和输入框排版 */
}
/* 统一label的样式：固定宽度+右对齐，确保输入框起始位置一致 */
.nameageemail label {
  display: inline-block;
  width: 80px; /* 根据文本长度调整，确保所有label宽度一致 */
  text-align: right;
  margin-right: 10px; /* 和输入框之间留些空隙 */
}
/* 统一输入框样式，加上单位，去掉多余的margin-right */
#Name, #Email, #Age{ 
  text-align: left; 
  width: 200px; 
  height: 25px; 
  display:inline-block;
}

HTML 代码

<html>
<head>
<title>Survey Form </title>
<!-- Survey Form. -->
<link href="SurveyForm.css" rel="stylesheet">
</head>
<body>
<h1 id="Title"> Survey Form </h1>
<form id="Survey-form">
<p id="description">Let us know how we can improve freeCodeCamp </p>
<div class="nameageemail">
  <p>
    <label>Name:</label>
    <input type="text" name="Name" id="Name" placeholder="Enter your name">
  </p>
  <p>
    <label>Email:</label>
    <input type="email" name="Email" id="Email" placeholder="Enter your email">
  </p>
  <p>
    <label>Age:</label>
    <input type="number" min="18" max="110" name="Age" id="Age" placeholder="Age">
  </p>
</div>
</form>
</body>
</html>

关键改动说明 #

• 给所有label设置固定宽度并右对齐：这样不管标签文本多长，输入框都能从相同的水平位置开始。
• 给输入框补上px单位：确保尺寸完全一致。
• 调整HTML结构：把Email那一行也放进<p>标签里，让三组输入框的结构保持一致，布局更规整。
• 修复背景色的语法错误：补上#号让背景色生效。

这样修改后，三个输入框就能完美对齐，并且尺寸完全相同啦！

内容的提问来源于stack exchange，提问作者pythonhelp2210