在單行上堆疊兩個文本行的替代方法-有解無憂

我已經在 Stack Overflow 上搜索了我熟悉的所有搜索詞，并且成功地創建了單行用戶名/密碼/提交解決方案，其中包含兩行內嵌的堆疊行，顯示了“記住我”（復選框）和“忘記密碼？”。

在單行上堆疊兩個文本行的替代方法

我用來構建它的代碼使用表結構，我想知道這是否是考慮到所有 HTML5 和 CSS 增強（我可能不熟悉）的最佳方法。是否有更好（或更現代）的方法可以推薦以確保強大的瀏覽器支持？這是我迄今為止使用的代碼：

<input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
<input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
<table style="display:inline-table;">
  <tr>
    <td  style="line-height:0.5; padding-top:0;">
      <input type="checkbox" id="remember_me" name="remember_me">
      <label style="color:#fff; font-size:70%;" for="remember_me"> Remember Me</label>
    </td>
  </tr>
  <tr>
    <td  style="line-height:0.5">
      <label style="color:#fff; font-size:70%;" for="remember_me">Forgot Password?</label>
    </td>
  </tr>
</table>
<input type="submit" name="submit" id="submit" tabindex="3" value="Login" onClick="Login();">

uj5u.com熱心網友回復：

我認為最好使用 flexbox 盒子，它不太容易混淆

<div style="background-color:#3f0;width:100%;display:flex;gap:8px"><!--flex added and gap-->
   <input type="email" name="email_address" id="email_address" tabindex="1" placeholder="Enter your EMAIL address">
   <input type="password" name="password" id="password" tabindex="2" placeholder="Enter your PASSWORD">
   <div style="display:flex;flex-direction:column"><!--flex added-->
   
      <div style="display:flex;align-items:center"><!--flex added-->
         <input type="checkbox" id="remember_me" name="remember_me">
         <label style="color:#000; font-size:70%;" for="remember_me"> Remember Me</label>
      </div>
      
      <label style="color:#000; font-size:70%;" for="remember_me">Forgot Password?</label>
      
   </div>
   <input type="submit" name="submit" id="submit" tabindex="3" value="Login" onClick="Login();">
</div>

uj5u.com熱心網友回復：

我不得不承認，在我看來，你這樣做的方式很奇怪。下面是我使用 Flexbox 而不是表格的方法。

#container {
  display: flex;
  width: 100%;
  background-color: gray;
  padding: 5px;
  gap: 5px;
  margin-top: 20px;
}

input {
  flex-grow: 1;
}

#remember-password p {
  color:white;
  margin: 0;
}

#remember-password div {
  display: flex;
  align-items: center;
}

button {
  padding: 0 20px;
}

<div id="container">
  <input type="text" placeholder="email"/>
  <input type="text" placeholder="password"/>
  <div id="remember-password">
    <div>
      <input type="checkbox"/>
      <p>Remember Me</p>
    </div>
    <div>
      <p>Forgot Password ?</p>
    </div>
  </div>
  <button>Login</button>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/529271.html

標籤：htmlcss形式

上一篇：10GBModSecurity檔案-大量920100警告。需要幫助了解違反規則

下一篇：我希望我的標簽的innerHTML用輸入值更新