css 我怎样才能把这个表格放在盒子下面？[已关闭]

tzxcd3kk 于 2023-03-05 发布在其他

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

- 已关闭**。此问题需要details or clarity。当前不接受答案。
- 想要改进此问题？**添加详细信息并通过editing this post阐明问题。

8小时前关门了。
Improve this question
你好，我想使形式下的框（新转诊）像在下面的图像：

我该怎么做呢？我想添加名字，姓氏，出生日期，电话，电子邮件，地址部分下的方块，但我无法解决它。任何帮助表示感谢。
我在代码片段上分享了我的代码。我想添加图标并并排写名字，我想在名字下面写一行。其他人也是这样。

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

.heading1 {
  position: absolute;
  width: 449px;
  height: 80px;
  top: 56px;
  font-family: 'Montserrat';
  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: 'Montserrat';
  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: 'Montserrat';
  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: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 32px;
  display: flex;
  align-items: center;
  text-align: center;
  font-feature-settings: 'pnum' on, 'lnum' on;
  color: #FFFFFF;
  background: #25A575;
}

.new {
  position: sticky;
  width: 132px;
  height: 24px;
  left: 305px;
  top: 354px;
  padding-left: 10px;
  font-family: 'Montserrat';
  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: 'pnum' on, 'lnum' on;
  color: #3A719B;
  background-color: white;
}

.box-body {
  width: 295px;
  height: 16px;
  left: 24px;
  top: 0px;
  font-family: 'Montserrat';
  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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&family=Oswald:wght@200;300;400&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://kit.fontawesome.com/0b27183842.css" crossorigin="anonymous">
  <title>Document</title>
</head>

<body>
  <script src="app.js"></script>

  <header class="header">
    <div class="container">
      <nav id="navbar">
        <h1 class="heading1">Patient Referral Form Hayes Valley Health San Francisco </h1>
      </nav>
    </div>
  </header>

  <h2 class="iki">Referral Patients</h2>
  <h3 class="uc">You can add up to five patients at a time</h3>
  <div class="box">
    <div class="box-header">
      <div class="b1">
        <div class="b11">
          1
        </div>
      </div>
      <div class="new">
        New Referral
      </div>
    </div>
  </div>
</body>
</html>

css

来源：https://stackoverflow.com/questions/75629605/how-can-i-make-this-form-under-box

1条答案

按热度按时间

t2a7ltrp1#

尝试使用边距：自动;代替位置：绝对;像这样：

body {
    margin: 0;
    background: #CDE7ED;
}
.heading1{
    position: absolute;
width: 449px;
height: 80px;
top: 56px;
font-family: 'Montserrat';
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: 'Montserrat';
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: 'Montserrat';
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: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
display: flex;
align-items: center;
font-feature-settings: 'pnum' on, 'lnum' on;
color: #3A719B;
background-color: white;
}
.box-body{
    width: 295px;
    height: 16px;
    left: 24px;
    top: 0px;        
    font-family: 'Montserrat';
    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;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://use.fontawesome.com/your-embed-code.js"></script> <!-- TODO: Place your Font Awesome embed code  -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&family=Oswald:wght@200;300;400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://kit.fontawesome.com/0b27183842.css" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <script src="app.js"></script>
    <header class="header">
        <div class="container">
            <nav id="navbar">
                <h1 class="heading1">Patient Referral Form Hayes Valley Health San Francisco </h1>
               
            </nav>
        </div>
    </header>

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

<div class="form_inp">
 <div class="disflex">    
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="input-container">
    <i class="fa fa-user icon"></i>
    <input class="input-field" type="text" placeholder="Username" name="usrnm">
  </div>
 </div>
  <div class="disflex">    
   <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
   </div>
   <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
   </div>
  </div>
  <div class="disflex">          
   <div class="input-container">
    <i class="fa fa-key icon"></i>
    <input class="input-field" type="password" placeholder="Password" name="psw">
   </div>
   <div class="input-container">
    <i class="fa fa-envelope icon"></i>
    <input class="input-field" type="text" placeholder="Email" name="email">
   </div>
  </div>

   <div class="full-input-container">
    <input class="input-field" type="text" placeholder="Email" name="email">
   </div>
   <div class="full-input-container">
    <input class="input-field" type="text" placeholder="Email" name="email">
   </div>
</div>
    <button type="submit" class="btn">SEND REFERRALS</button>
</form>

</div>        
</body>
</html>

赞(0）回复(0）举报 2023-03-05

我来回答

css 我怎样才能把这个表格放在盒子下面？[已关闭]

1条答案

相关问题

热门标签

最新问答