如何调整输入框大小并同时对齐？

Question

我正在尝试使用 HTML 和 CSS 创建一个，但在调整输入框大小时遇到问题。我想要一个可以对齐输入框标题但也可以调整某些输入框大小的表单。这是我想用 HTML 和 CSS 重新创建的图片：

如上所示，输入框标题是对齐的，但输入框的大小也不同。我尝试过使用表格来对齐输入框标题，但我无法以不同的方式调整每个输入框的大小。

<div class=wrapper-wrapper>
  <div id="page-content-wrapper">
    <form>
      <div class="wrapper">
        <h1>Form Add Supplier</h1>
        <form action="">
          <label>First Name</label>
          <input type="text" name="first"><br />
          <label>Last Name</label>
          <input type="text" name="last"><br />
          <label>Email</label>
          <input type="text" name="email"><br />
          <label>Address</label>
          <input type="text" name="email"><br />
          <a href="/mastersupplier"><button type="button" class="btncancel">Cancel</button></a>
          <button type="submit" class="btnsubmit">Submit</button>
        </form>
      </div>
    </form>
  </div>
</div>

如有任何帮助，我们将不胜感激，谢谢！

Answer 1

我尝试了 Css 和 Grid，并得到了结果。就看看吧！！

.form {
    width: 300px;
    height: 300px;
    border: 4px solid rgb(43, 183, 183);
    margin: 30px;
    padding: 10px;
}
.form h1 {
    color: blue;
    text-align: center;
    line-height: 15px;
}

form {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 20px;
}
form #name {
    width: 120px;
}
form #term {
    width: 30%;
}
form #phone {
    width: 140px;
}
form #desc {
    width: 160px;
}

#day {
    margin-left: -110px;
}
.form button {
    width: 80px;
    border-radius: 30%;
    border: none;
}
.form #submit {
    margin-left: -100px;
    color: white;
    background-color: rgb(0, 140, 255);
}
.form #cancel {
    color: white;
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="form2.css">
</head>
<body>
    <div class="form">
        <h1>FORM</h1>
        <H1>ADD CUSTOMER</H1>
        <form>
           <label>Name</label>
           <input type="text" id="name"> <br>
           <label>Term</label>
           <input type="text" id="term">
           <label id="day">Day</label>
           <label>Phone</label>
           <input type="text" id="phone"> <br>
           <label>Description</label>
           <input type="text" id="desc"> <br>
           <h1></h1>
           <button id="cancel">Cancel</button>
           <button id="submit">Submit</button>
        </form>
    </div>
</body>
</html>

如何调整输入框大小并同时对齐？

问题描述投票：0回答：1

1个回答

最新问题

如何调整输入框大小并同时对齐？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1