时间戳

首页 > 解决方案 > CSS 中的内部表单对齐：对齐输入框和文本字符串的困难

html - CSS 中的内部表单对齐：对齐输入框和文本字符串的困难

问题描述

所以，我正在构建一个表格来收集个人信息。一行中的三个部分 - 一个文本字符串字段名称、一个input框和一个文本字符串说明和示例，我希望看起来像这样：

      First Name: INPUT BOX eg. Bob, your given name
         Surname: INPUT BOX eg. Smith, your family name
Languages Spoken: INPUT BOX eg. English, French, Chinese,

所以这是一个超出我的 CSS 问题，因为 CSS 对我来说是新的。我有兴趣获得三个笔直的垂直对齐方式：冒号、input方框和例如。最左边的边距是参差不齐的，最右边的边距也是如此。我想将注意力集中在中心的输入框上，并将左右文本字符串放置在两侧，每个输入项一行。如何解决这个问题？原始 html 默认为带有参差不齐的内部对齐的齐平左边距。

谢谢你的帮助，

账单

示例 html：

<!-- Repeat and customize the 3 line block for each line/input-box/string -->

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Personal Data Collector </title>
  <meta charset="utf-8">
</head>

<body>
  <fieldset>
    <form method="post" action="personal_d_collector.py">
      <h3> Personal Data </h3>
      <lable for="f_name"> First Name: </lable>
      <input type="text" id="f_name" name="f_name">
      <span> eg. Bob, your given name. </span><br>
      <lable for="l_name"> Surname: </lable>
      <input type="text" id="l_name" name="l_name">
      <span> eg. Smith, your family name. </span><br>
    </form>
  </fieldset>
</body>

<html>

标签： htmlcssforms

解决方案

<label for="f_name"> First Name: </label>
<input type="text" id="f_name" name="f_name" style="margin-left:200px;">
<span style="float:right;"> eg. Bob, your given name. </span><br>

<label for="l_name"> Surname: </label>
<input type="text" id="l_name" name="l_name" style="margin-left:200px;">
<span style="float:right;"> eg. Smith, your family name. </span><br>

这将起作用，我认为将输入框居中最好先将其放在 div 块中，然后将其居中以实现响应性。

<div style="text-align:center;">
  <label for="f_name" style="float:left;"> First Name: </label>
  <input type="text" />
  <span style="float:right;"> eg. Bob, your given name. </span><br>
</div>

这是另一种方法。

推荐阅读