如何使这个表格在框下面？

huangapple
go评论89阅读模式
英文:

How Can I Make This Form Under Box?

问题

以下是您要翻译的部分：

"Hello I want to make form under the box (new referral) like in the image below:

如何使这个表格在框下面？

How can I do it? I wanna add first name last name date of birth, phone, email, address sections under the box but I could not solve it out. Any help appreciated.

I shared my codes on code snippet. I wanna add icon and write First name side by side and I want line under first name. Others are like that too."

图像如下：

如何使这个表格在框下面？

英文:

Hello I want to make form under the box (new referral) like in the image below:

如何使这个表格在框下面？

How can I do it? I wanna add first name last name date of birth, phone, email, address sections under the box but I could not solve it out. Any help appreciated.

I shared my codes on code snippet. I wanna add icon and write First name side by side and I want line under first name. Others are like that too.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   border: 0;
  4.   box-sizing: border-box;
  5.   background: #CDE7ED;
  6. }
  8. .heading1 {
  9.   position: absolute;
  10.   width: 449px;
  11.   height: 80px;
  12.   top: 56px;
  13.   font-family: &#39;Montserrat&#39;;
  14.   font-style: normal;
  15.   font-weight: 500;
  16.   font-size: 30px;
  17.   line-height: 40px;
  18.   /* or 133% */
  19.   text-align: center;
  20.   background: #FFFFFF;
  21.   color: #0B2B5B;
  22. }
  24. #navbar {
  25.   position: relative;
  26.   height: 196px;
  27.   top: 0px;
  28.   display: flex;
  29.   justify-content: center;
  30.   background: #FFFFFF;
  31. }
  33. .iki {
  34.   height: 32px;
  35.   left: 539px;
  36.   top: 230px;
  37.   font-family: &#39;Montserrat&#39;;
  38.   font-style: normal;
  39.   font-weight: 500;
  40.   font-size: 24px;
  41.   line-height: 32px;
  42.   text-align: center;
  43.   color: #0B2B5B;
  44. }
  46. .uc {
  47.   height: 32px;
  48.   left: 435px;
  49.   top: 270px;
  50.   font-family: &#39;Montserrat&#39;;
  51.   font-style: normal;
  52.   font-weight: 500;
  53.   font-size: 20px;
  54.   line-height: 32px;
  55.   /* identical to box height, or 160% */
  56.   text-align: center;
  57.   color: #0B2B5B;
  58. }
  60. .box {
  61.   position: absolute;
  62.   width: 782px;
  63.   height: 380px;
  64.   left: 470px;
  65.   top: 334px;
  66.   background: #FFFFFF;
  67.   box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
  68.   border-radius: 4px;
  69. }
  71. .box-header {
  72.   width: 782px;
  73.   height: 64px;
  74.   left: 249px;
  75.   top: 334px;
  76.   background: #FFFFFF;
  77.   border-radius: 4px 4px 0px 0px;
  78.   display: flex;
  79. }
  81. .b1 {
  82.   width: 40px;
  83.   height: 64px;
  84.   left: 249px;
  85.   top: 334px;
  86.   background: #25A575;
  87.   border-radius: 4px 0px 0px 0px;
  88. }
  90. .b11 {
  91.   width: 10px;
  92.   height: 32px;
  93.   left: 264px;
  94.   top: 350px;
  95.   font-family: &#39;Montserrat&#39;;
  96.   font-style: normal;
  97.   font-weight: 500;
  98.   font-size: 26px;
  99.   line-height: 32px;
  100.   display: flex;
  101.   align-items: center;
  102.   text-align: center;
  103.   font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
  104.   color: #FFFFFF;
  105.   background: #25A575;
  106. }
  108. .new {
  109.   position: sticky;
  110.   width: 132px;
  111.   height: 24px;
  112.   left: 305px;
  113.   top: 354px;
  114.   padding-left: 10px;
  115.   font-family: &#39;Montserrat&#39;;
  116.   font-style: normal;
  117.   font-weight: 500;
  118.   font-size: 20px;
  119.   line-height: 24px;
  120.   /* identical to box height, or 120% */
  121.   display: flex;
  122.   align-items: center;
  123.   font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
  124.   color: #3A719B;
  125.   background-color: white;
  126. }
  128. .box-body {
  129.   width: 295px;
  130.   height: 16px;
  131.   left: 24px;
  132.   top: 0px;
  133.   font-family: &#39;Montserrat&#39;;
  134.   font-style: normal;
  135.   font-weight: 400;
  136.   font-size: 16px;
  137.   line-height: 16px;
  138.   /* identical to box height, or 100% */
  139.   display: flex;
  140.   align-items: center;
  141.   color: #3A719B;
  142. }
  144. .line {
  145.   position: absolute;
  146.   left: 0%;
  147.   right: 0%;
  148.   top: 100%;
  149.   bottom: 0%;
  150.   border: 1px solid #3A719B;
  151. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.   &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.   &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  7.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8.   &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  9.   &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
  10.   &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  11.   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css&quot;&gt;
  12.   &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  13.   &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  14.   &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&amp;family=Oswald:wght@200;300;400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  15.   &lt;link rel=&quot;stylesheet&quot; href=&quot;https://kit.fontawesome.com/0b27183842.css&quot; crossorigin=&quot;anonymous&quot;&gt;
  16.   &lt;title&gt;Document&lt;/title&gt;
  17. &lt;/head&gt;
  19. &lt;body&gt;
  20.   &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  22.   &lt;header class=&quot;header&quot;&gt;
  23.     &lt;div class=&quot;container&quot;&gt;
  24.       &lt;nav id=&quot;navbar&quot;&gt;
  25.         &lt;h1 class=&quot;heading1&quot;&gt;Patient Referral Form Hayes Valley Health San Francisco &lt;/h1&gt;
  26.       &lt;/nav&gt;
  27.     &lt;/div&gt;
  28.   &lt;/header&gt;
  30.   &lt;h2 class=&quot;iki&quot;&gt;Referral Patients&lt;/h2&gt;
  31.   &lt;h3 class=&quot;uc&quot;&gt;You can add up to five patients at a time&lt;/h3&gt;
  32.   &lt;div class=&quot;box&quot;&gt;
  33.     &lt;div class=&quot;box-header&quot;&gt;
  34.       &lt;div class=&quot;b1&quot;&gt;
  35.         &lt;div class=&quot;b11&quot;&gt;
  36.           1
  37.         &lt;/div&gt;
  38.       &lt;/div&gt;
  39.       &lt;div class=&quot;new&quot;&gt;
  40.         New Referral
  41.       &lt;/div&gt;
  42.     &lt;/div&gt;
  43.   &lt;/div&gt;
  44. &lt;/body&gt;
  45. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: -1

尝试使用margin:auto;而不是position:absolute;，像这样：

  1. body {
  2.     margin: 0;
  3.     background: #CDE7ED;
  4. }
  5. .heading1 {
  6.     width: 449px;
  7.     height: 80px;
  8.     margin: auto; /* 这里改为margin:auto; */
  9.     font-family: 'Montserrat';
  10.     font-style: normal;
  11.     font-weight: 500;
  12.     font-size: 30px;
  13.     line-height: 40px;
  14.     text-align: center;
  15.     background: #FFFFFF;
  16.     color: #0B2B5B;
  17. }
  19. #navbar {
  20.     position: relative;
  21.     height: 196px;
  22.     top: 0px;
  23.     display: flex;
  24.     justify-content: center;
  25.     background: #FFFFFF;
  26. }
  28. /* 其他样式保持不变 */

请注意，我只对heading1的position属性进行了更改，其他样式保持不变。

英文:

Try using the margin:auto; instead of position:absolute; like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

  1. body {
  2.     margin: 0;
  3.     background: #CDE7ED;
  4. }
  5. .heading1{
  6.     position: absolute;
  7. width: 449px;
  8. height: 80px;
  9. top: 56px;
  10. font-family: &#39;Montserrat&#39;;
  11. font-style: normal;
  12. font-weight: 500;
  13. font-size: 30px;
  14. line-height: 40px;
  15. /* or 133% */
  16. text-align: center;
  17. background: #FFFFFF;
  18. color: #0B2B5B;
  19. }
  21. #navbar{
  22. position: relative;
  23. height: 196px;
  24. top: 0px;
  25. display: flex;
  26. justify-content: center;
  27. background: #FFFFFF;
  28. }
  30. .iki{
  31. height: 32px;
  32. margin-top: 20px;
  33. font-family: &#39;Montserrat&#39;;
  34. font-style: normal;
  35. font-weight: 500;
  36. font-size: 24px;
  37. line-height: 32px;
  38. text-align: center;
  39. color: #0B2B5B;
  40. }
  41. .uc{
  42. height: 32px;
  43. margin-bottom: 20px;
  44. font-family: &#39;Montserrat&#39;;
  45. font-style: normal;
  46. font-weight: 500;
  47. font-size: 20px;
  48. line-height: 32px;
  49. /* identical to box height, or 160% */
  50. text-align: center;
  51. color: #0B2B5B;
  52. }
  54. .box{
  55.     width: 782px;
  56.     height: 380px;
  57.     margin: auto;        
  58.     background: #FFFFFF;
  59.     box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
  60.     border-radius: 4px;
  61. }
  63. .box-header{       
  64. width: 782px;
  65. height: 64px;
  66. left: 249px;
  67. top: 334px;
  68. background: #FFFFFF;
  69. border-radius: 4px 4px 0px 0px;
  70. display: flex;
  71. }
  73. .b1{        
  74. width: 40px;
  75. background: #25A575;
  76. }
  78. .b11{
  79. height: 100%;
  80. font-weight: 500;
  81. font-size: 26px;
  82. display: flex;
  83. align-items: center;
  84. justify-content: center;
  85. color: #FFFFFF;
  86. }
  87. .new{
  88. padding-left: 20px;
  89. font-family: &#39;Montserrat&#39;;
  90. font-style: normal;
  91. font-weight: 500;
  92. font-size: 20px;
  93. display: flex;
  94. align-items: center;
  95. font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
  96. color: #3A719B;
  97. background-color: white;
  98. }
  99. .box-body{
  100.     width: 295px;
  101.     height: 16px;
  102.     left: 24px;
  103.     top: 0px;        
  104.     font-family: &#39;Montserrat&#39;;
  105.     font-style: normal;
  106.     font-weight: 400;
  107.     font-size: 16px;
  108.     line-height: 16px;
  109.     /* identical to box height, or 100% */        
  110.     display: flex;
  111.     align-items: center;        
  112.     color: #3A719B;
  113. }
  114. .line{
  115.   position: absolute;
  116. left: 0%;
  117. right: 0%;
  118. top: 100%;
  119. bottom: 0%;
  120. border: 1px solid #3A719B;
  121. }
  122. .disflex {
  123.   display: flex;
  124. }
  125. .form_inp {
  126.   padding: 60px;
  127. }
  128. .disflex .input-container, .full-input-container {
  129.   width: 50%;
  130.   border-bottom: 1.5px solid steelblue;
  131.   margin: 0 30px 30px 0;
  132. }
  133. .disflex .input-container input, .full-input-container input {
  134.   border: 0;
  135. }
  136. .full-input-container {
  137.   width: 100% !important;
  138.   margin: 0 0 30px 0 !important;
  139. }
  140. .btn {
  141. margin: 0 0 50px 0;
  142. width: 100%;
  143. border-radius: 50px;
  144. padding: 10px;
  145. background-color: midnightblue;
  146. color: white;
  147. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7.     &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  8.     &lt;script src=&quot;https://use.fontawesome.com/your-embed-code.js&quot;&gt;&lt;/script&gt; &lt;!-- TODO: Place your Font Awesome embed code  --&gt;
  9.     &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
  10.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  11.     &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css&quot;&gt;
  12.     &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  13.     &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  14.     &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&amp;family=Oswald:wght@200;300;400&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  15.     &lt;link rel=&quot;stylesheet&quot; href=&quot;https://kit.fontawesome.com/0b27183842.css&quot; crossorigin=&quot;anonymous&quot;&gt;
  16.     &lt;title&gt;Document&lt;/title&gt;
  17. &lt;/head&gt;
  18. &lt;body&gt;
  19.     &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  20.     &lt;header class=&quot;header&quot;&gt;
  21.         &lt;div class=&quot;container&quot;&gt;
  22.             &lt;nav id=&quot;navbar&quot;&gt;
  23.                 &lt;h1 class=&quot;heading1&quot;&gt;Patient Referral Form Hayes Valley Health San Francisco &lt;/h1&gt;
  24.                
  25.             &lt;/nav&gt;
  26.         &lt;/div&gt;
  27.     &lt;/header&gt;
  29.     &lt;h2 class=&quot;iki&quot;&gt;Referral Patients&lt;/h2&gt;
  30.     &lt;h3 class=&quot;uc&quot;&gt;You can add up to five patients at a time&lt;/h3&gt;
  31.     &lt;div class=&quot;box&quot;&gt;
  32.         &lt;div class=&quot;box-header&quot;&gt;
  33.             &lt;div class=&quot;b1&quot;&gt;
  34.                 &lt;div class=&quot;b11&quot;&gt;
  35.                     1
  36.                 &lt;/div&gt;
  37.             &lt;/div&gt;
  38.             &lt;div class=&quot;new&quot;&gt;
  39.                 New Referral 
  40.             &lt;/div&gt;
  41.         &lt;/div&gt;
  42. &lt;form action=&quot;/action_page.php&quot;&gt;
  44. &lt;div class=&quot;form_inp&quot;&gt;
  45.  &lt;div class=&quot;disflex&quot;&gt;    
  46.   &lt;div class=&quot;input-container&quot;&gt;
  47.     &lt;i class=&quot;fa fa-user icon&quot;&gt;&lt;/i&gt;
  48.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Username&quot; name=&quot;usrnm&quot;&gt;
  49.   &lt;/div&gt;
  50.   &lt;div class=&quot;input-container&quot;&gt;
  51.     &lt;i class=&quot;fa fa-user icon&quot;&gt;&lt;/i&gt;
  52.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Username&quot; name=&quot;usrnm&quot;&gt;
  53.   &lt;/div&gt;
  54.  &lt;/div&gt;
  55.   &lt;div class=&quot;disflex&quot;&gt;    
  56.    &lt;div class=&quot;input-container&quot;&gt;
  57.     &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
  58.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
  59.    &lt;/div&gt;
  60.    &lt;div class=&quot;input-container&quot;&gt;
  61.     &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
  62.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
  63.    &lt;/div&gt;
  64.   &lt;/div&gt;
  65.   &lt;div class=&quot;disflex&quot;&gt;          
  66.    &lt;div class=&quot;input-container&quot;&gt;
  67.     &lt;i class=&quot;fa fa-key icon&quot;&gt;&lt;/i&gt;
  68.     &lt;input class=&quot;input-field&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; name=&quot;psw&quot;&gt;
  69.    &lt;/div&gt;
  70.    &lt;div class=&quot;input-container&quot;&gt;
  71.     &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
  72.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
  73.    &lt;/div&gt;
  74.   &lt;/div&gt;
  76.    &lt;div class=&quot;full-input-container&quot;&gt;
  77.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
  78.    &lt;/div&gt;
  79.    &lt;div class=&quot;full-input-container&quot;&gt;
  80.     &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
  81.    &lt;/div&gt;
  82. &lt;/div&gt;
  83.     &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;SEND REFERRALS&lt;/button&gt;
  84. &lt;/form&gt;
  86. &lt;/div&gt;        
  87. &lt;/body&gt;
  88. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月4日 00:28:12
  • 转载请务必保留本文链接：https://go.coder-hub.com/75629605.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定