Question

我试图将页面上的固定宽度输入字段居中，并使文本与输入字段的左边缘对齐：抱歉忘记了divs

      <style>
        td {border: 1px solid black;}

        input[type=text] {
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
          }

        .AddFunction{
          position: center;
          text-align: left;
          margin-left: auto;
          margin-right: auto;
        }

      </style>

  <div class="AddFunction">
  <h2>Add Record</h2>
    <form action="crud.ctrl.php?act=insert" method="post">
      First Name: <br><input type="text" name="fname"> <br />
      Last Name: <br><input type="text" name="lname"> <br />
      Phone: <br><input type="text" name="phone"> <br />
      Email: <br><input type="text" name="email"> <br />
      Location: <br><input type="text" name="location"> <br />
      MC: <br><input type="text" name="mc"> <br />
      Position: <br><input type="text" name="pos"> <br />
      Department: <br><input type="text" name="dept"> <br />
      <input type="submit">
    </form>
  </div>

Answer 1

让我们修复你标记使用label，无论如何你应该使用label { display: block; width: 50%; margin: 0 auto; /*This Centers the label block*/ } input[type=text] { width: 100%; display: block; /*Give the input its own line*/ padding: 10px; box-sizing: border-box; }。

<form action="crud.ctrl.php?act=insert" method="post">
  <label>First Name: <input type="text" name="fname"></label>
  <label>Last Name: <input type="text" name="lname"></label>
  <label>Phone:<input type="text" name="phone"> </label>
  <label>Email:<input type="text" name="email"> </label>
  <label>Location:<input type="text" name="location"> </label>
  <label>MC: <input type="text" name="mc"> </label>
  <label>Position:<input type="text" name="pos"> </label>
  <label>Department:<input type="text" name="dept"> </label>
  <input type="submit">
</form>

-moz

如何将字段居中，但文字对齐到字段的左侧？

1 个答案: