css 我如何对齐两个输入框?[已关闭]

yhxst69z  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(128)

已关闭。此问题需要超过focused。当前不接受答案。
**想要改进此问题吗?**更新此问题,使其仅关注editing this post的一个问题。

昨天关门了。
Improve this question
我想使这个样式下图,我试图添加左边距,但它不工作。

<form action="login" method="post">
   <fieldset name="logininfo">
      <legend>Access Patient Record</legend>
      <label for="username">Username:</label>
      <input type="text" name="username" id="username"><br> <label for="password">Password:</label>
      <input type="password" name="password" id="password"><br> <input type="submit" name="login" value="Login">
   </fieldset>
</form>
fieldset {
    background:lightcyan;
    /* center the form */
    margin:auto;
    position:relative;
    top:100px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top:20px;
    padding-bottom:20px;
    width:300px;
}

label {
    margin-right: 20px;
}
7rfyedvj

7rfyedvj1#

您可以使用此代码来修复此问题:

fieldset {
  background: lightcyan;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*   center the form */
  margin: auto;
  position: relative;
  top: 100px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  max-width: 300px;
}

.form-input{
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 10px;
}

label {
    font-size: 20px;
    text-align: right;
    margin-right: 10px;
}
<body>
  <form action="login" method="post">
    <fieldset name="logininfo">
      <legend>Access Patient Record</legend>
      <div class='form-input'>
        <label for="username">Username:</label>
        <input type="text" name="username" id="username"><br> 
      </div>
      <div class='form-input'>
        <label for="password">Password:</label>
        <input type="password" name="password" id="password"><br> 
      </div>
      <input type="submit" name="login" value="Login">
    </fieldset>
  </form>
</body>

相关问题