You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

45 lines
1.2 KiB

2 years ago
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. #form div {
  9. display: flex;
  10. /* height: 50px; */
  11. /* stretch 是 align-items 默认值。元素被拉伸以适应容器。*/
  12. /* align-items: stretch; */
  13. /* flex-start:元素位于容器的开头。弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。 */
  14. align-items: flex-start;
  15. flex: 0 0 30px;
  16. }
  17. #form div label {
  18. flex: 0 0 100px;
  19. text-align: right;
  20. }
  21. #form {
  22. display: flex;
  23. flex-direction: column;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <form>
  29. <div id="form">
  30. <div>
  31. <label>姓名:</label>
  32. <input type="text">
  33. </div>
  34. <div>
  35. <label>请输入密码:</label>
  36. <input type="text">
  37. </div>
  38. </div>
  39. </form>
  40. </body>
  41. </html>