将两个输入框对齐显示，css怎么编写的？例如姓名： 电话号码：这两个输入框

在CSS中，你可以使用Flexbox布局或者Grid布局来轻松地将两个输入框水平对齐。这里我们以Flexbox为例，假设这两个输入框的容器是一个`div`元素：

<div class="input-container">
  <label for="name">姓名：</label>
  <input type="text" id="name" />
  <label for="phone">电话号码：</label>
  <input type="text" id="phone" />
</div>

然后在CSS里应用 Flexbox 布局规则：

.input-container {
  display: flex;
  align-items: center; /* 使子元素顶部对齐 */
  justify-content: space-between; /* 子元素间均匀分布，第一个子元素靠左，第二个靠右 */
  width: 100%; /* 设置宽度以便适应内容 */
  padding: 10px; /* 如果有间距需求，可以设置外边距 */
}

这样，无论输入框里的内容如何，两个输入框都会在一行上对齐，并且标签文字和输入框之间有一定的间隔。

如果你希望标签文本恰好与输入框等宽，你可以利用 `calc()` 函数结合 `content` 属性来动态计算标签文本的宽度，然后设置输入框的左边距：

.label-text {
  content: attr(for);
  display: inline-block;
  width: calc(100% - 2rem); /* 这里2rem是输入框左右各留1rem的距离，根据实际情况调整 */
}

.input-container {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 使输入框都在标签文本左侧 */
}