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

yhxst69z 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(129)

已关闭。此问题需要超过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;
}

css

来源：https://stackoverflow.com/questions/75274947/how-can-i-align-the-two-input-boxes

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-02-01

我来回答

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

1条答案

相关问题

热门标签

最新问答