英文:
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 -->
* {
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案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:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论