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

huangapple

117266
文章

0
评论

2023年3月4日 00:28:12go评论72阅读模式

英文:

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.

* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  background: #CDE7ED;
}

.heading1 {
  position: absolute;
  width: 449px;
  height: 80px;
  top: 56px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 500;
  font-size: 30px;
  line-height: 40px;
  /* or 133% */
  text-align: center;
  background: #FFFFFF;
  color: #0B2B5B;
}

#navbar {
  position: relative;
  height: 196px;
  top: 0px;
  display: flex;
  justify-content: center;
  background: #FFFFFF;
}

.iki {
  height: 32px;
  left: 539px;
  top: 230px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
  color: #0B2B5B;
}

.uc {
  height: 32px;
  left: 435px;
  top: 270px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 32px;
  /* identical to box height, or 160% */
  text-align: center;
  color: #0B2B5B;
}

.box {
  position: absolute;
  width: 782px;
  height: 380px;
  left: 470px;
  top: 334px;
  background: #FFFFFF;
  box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
  border-radius: 4px;
}

.box-header {
  width: 782px;
  height: 64px;
  left: 249px;
  top: 334px;
  background: #FFFFFF;
  border-radius: 4px 4px 0px 0px;
  display: flex;
}

.b1 {
  width: 40px;
  height: 64px;
  left: 249px;
  top: 334px;
  background: #25A575;
  border-radius: 4px 0px 0px 0px;
}

.b11 {
  width: 10px;
  height: 32px;
  left: 264px;
  top: 350px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  display: flex;
  align-items: center;
  text-align: center;
  font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
  color: #FFFFFF;
  background: #25A575;
}

.new {
  position: sticky;
  width: 132px;
  height: 24px;
  left: 305px;
  top: 354px;
  padding-left: 10px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  /* identical to box height, or 120% */
  display: flex;
  align-items: center;
  font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
  color: #3A719B;
  background-color: white;
}

.box-body {
  width: 295px;
  height: 16px;
  left: 24px;
  top: 0px;
  font-family: &#39;Montserrat&#39;;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  /* identical to box height, or 100% */
  display: flex;
  align-items: center;
  color: #3A719B;
}

.line {
  position: absolute;
  left: 0%;
  right: 0%;
  top: 100%;
  bottom: 0%;
  border: 1px solid #3A719B;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
  &lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;&gt;&lt;/script&gt;
  &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;
  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
  &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
  &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;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://kit.fontawesome.com/0b27183842.css&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;

  &lt;header class=&quot;header&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;nav id=&quot;navbar&quot;&gt;
        &lt;h1 class=&quot;heading1&quot;&gt;Patient Referral Form Hayes Valley Health San Francisco &lt;/h1&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/header&gt;

  &lt;h2 class=&quot;iki&quot;&gt;Referral Patients&lt;/h2&gt;
  &lt;h3 class=&quot;uc&quot;&gt;You can add up to five patients at a time&lt;/h3&gt;
  &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;box-header&quot;&gt;
      &lt;div class=&quot;b1&quot;&gt;
        &lt;div class=&quot;b11&quot;&gt;
          1
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;new&quot;&gt;
        New Referral
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: -1

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

body {
    margin: 0;
    background: #CDE7ED;
}
.heading1 {
    width: 449px;
    height: 80px;
    margin: auto; /* 这里改为margin:auto; */
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 30px;
    line-height: 40px;
    text-align: center;
    background: #FFFFFF;
    color: #0B2B5B;
}

#navbar {
    position: relative;
    height: 196px;
    top: 0px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
}

/* 其他样式保持不变 */

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

英文:

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

body {
    margin: 0;
    background: #CDE7ED;
}
.heading1{
    position: absolute;
width: 449px;
height: 80px;
top: 56px;
font-family: &#39;Montserrat&#39;;
font-style: normal;
font-weight: 500;
font-size: 30px;
line-height: 40px;
/* or 133% */
text-align: center;
background: #FFFFFF;
color: #0B2B5B;
}

#navbar{
position: relative;
height: 196px;
top: 0px;
display: flex;
justify-content: center;
background: #FFFFFF;
}

.iki{
height: 32px;
margin-top: 20px;
font-family: &#39;Montserrat&#39;;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #0B2B5B;
}
.uc{
height: 32px;
margin-bottom: 20px;
font-family: &#39;Montserrat&#39;;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 32px;
/* identical to box height, or 160% */
text-align: center;
color: #0B2B5B;
}

.box{
    width: 782px;
    height: 380px;
    margin: auto;        
    background: #FFFFFF;
    box-shadow: 0px 2px 4px rgba(11, 43, 91, 0.1);
    border-radius: 4px;
}

.box-header{       
width: 782px;
height: 64px;
left: 249px;
top: 334px;
background: #FFFFFF;
border-radius: 4px 4px 0px 0px;
display: flex;
}

.b1{        
width: 40px;
background: #25A575;
}

.b11{
height: 100%;
font-weight: 500;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
}
.new{
padding-left: 20px;
font-family: &#39;Montserrat&#39;;
font-style: normal;
font-weight: 500;
font-size: 20px;
display: flex;
align-items: center;
font-feature-settings: &#39;pnum&#39; on, &#39;lnum&#39; on;
color: #3A719B;
background-color: white;
}
.box-body{
    width: 295px;
    height: 16px;
    left: 24px;
    top: 0px;        
    font-family: &#39;Montserrat&#39;;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    /* identical to box height, or 100% */        
    display: flex;
    align-items: center;        
    color: #3A719B;
}
.line{
  position: absolute;
left: 0%;
right: 0%;
top: 100%;
bottom: 0%;
border: 1px solid #3A719B;
}
.disflex {
  display: flex;
}
.form_inp {
  padding: 60px;
}
.disflex .input-container, .full-input-container {
  width: 50%;
  border-bottom: 1.5px solid steelblue;
  margin: 0 30px 30px 0;
}
.disflex .input-container input, .full-input-container input {
  border: 0;
}
.full-input-container {
  width: 100% !important;
  margin: 0 0 30px 0 !important;
}
.btn {
margin: 0 0 50px 0;
width: 100%;
border-radius: 50px;
padding: 10px;
background-color: midnightblue;
color: white;
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
    &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;
    &lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js&quot;&gt;&lt;/script&gt;
    &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;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
    &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
    &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;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://kit.fontawesome.com/0b27183842.css&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
    &lt;header class=&quot;header&quot;&gt;
        &lt;div class=&quot;container&quot;&gt;
            &lt;nav id=&quot;navbar&quot;&gt;
                &lt;h1 class=&quot;heading1&quot;&gt;Patient Referral Form Hayes Valley Health San Francisco &lt;/h1&gt;
               
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;h2 class=&quot;iki&quot;&gt;Referral Patients&lt;/h2&gt;
    &lt;h3 class=&quot;uc&quot;&gt;You can add up to five patients at a time&lt;/h3&gt;
    &lt;div class=&quot;box&quot;&gt;
        &lt;div class=&quot;box-header&quot;&gt;
            &lt;div class=&quot;b1&quot;&gt;
                &lt;div class=&quot;b11&quot;&gt;
                    1
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;new&quot;&gt;
                New Referral 
            &lt;/div&gt;
        &lt;/div&gt;
&lt;form action=&quot;/action_page.php&quot;&gt;

&lt;div class=&quot;form_inp&quot;&gt;
 &lt;div class=&quot;disflex&quot;&gt;    
  &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-user icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Username&quot; name=&quot;usrnm&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-user icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Username&quot; name=&quot;usrnm&quot;&gt;
  &lt;/div&gt;
 &lt;/div&gt;
  &lt;div class=&quot;disflex&quot;&gt;    
   &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
   &lt;/div&gt;
   &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;disflex&quot;&gt;          
   &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-key icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;password&quot; placeholder=&quot;Password&quot; name=&quot;psw&quot;&gt;
   &lt;/div&gt;
   &lt;div class=&quot;input-container&quot;&gt;
    &lt;i class=&quot;fa fa-envelope icon&quot;&gt;&lt;/i&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
   &lt;/div&gt;
  &lt;/div&gt;

   &lt;div class=&quot;full-input-container&quot;&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
   &lt;/div&gt;
   &lt;div class=&quot;full-input-container&quot;&gt;
    &lt;input class=&quot;input-field&quot; type=&quot;text&quot; placeholder=&quot;Email&quot; name=&quot;email&quot;&gt;
   &lt;/div&gt;
&lt;/div&gt;
    &lt;button type=&quot;submit&quot; class=&quot;btn&quot;&gt;SEND REFERRALS&lt;/button&gt;
&lt;/form&gt;

&lt;/div&gt;        
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。