ahmedaziz
Well-known member
- Joined
- Feb 22, 2023
- Messages
- 55
- Programming Experience
- 1-3
I work on template using html and CSS . I face issue I can't do alignment label text on left and right to be same .
as example
submit Date and Employee id not start from same point on left so I need all text on left have same alignment .
also on right also text not start from same point as رقم الهاتف and اسم الموظف
so I need all text on right have same alignment .
full html and CSS what I try as below :
expected result as below :
as example
submit Date and Employee id not start from same point on left so I need all text on left have same alignment .
also on right also text not start from same point as رقم الهاتف and اسم الموظف
so I need all text on right have same alignment .
full html and CSS what I try as below :
full details html and css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
.label-container {
display: flex;
justify-content: space-between;
}
.left-label {
text-align: left;
}
.right-label {
text-align: right;
}
.form-header {
color: black;
background-color: gray;
text-align: center;
width: 50%;
padding: 20px;
margin: 10px auto;
}
.form-header h2 {
margin: 0;
font-weight: 500;
}
.form-container {
border: 2px dashed gray;
border-bottom: none;
max-width: 100%;
padding-bottom: 10px;
margin: 0 auto;
}
.form-info {
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 5px;
background-color: gray;
}
.employee-info {
display: flex;
justify-content: space-around;
}
.id_container {
display: flex;
gap: 10px;
margin-left: 10px;
}
.name_container {
display: flex;
gap: 10px;
}
.table-border-end {
height: 50px;
border-top: 2px dashed gray;
border-bottom: 2px dashed gray;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"],
textarea,
input[type="date"] {
width: 100%;
padding: 5px;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.line-container {
margin-top: 30px;
}
.line {
border: none;
border-top: 1px solid black;
margin: 0;
}
.solid-table {
border-collapse: collapse;
width: 100%;
}
.solid-table th,
.solid-table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
<body>
<div class="form-header">
<h2>
نموذج تسجيل استقاله <br /> Resignation Submission Form
</h2>
</div>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input">To be filled by the Employee</label>
</div>
<div class="form-section">
<p class="fill-by-employee">يتم ملئها من الموظف</p>
</div>
</div>
<div class="form">
<form>
<div class="employee-info" style="margin-left:10px;">
<div class="id_container">
<label for="emp-id">Emp. ID:</label>
<label for="emp-id">-------------------</label>
<label for="dept-branch">:رقم الموظف</label>
</div>
<div class="name_container">
<label for="submission-date">Emp Name:</label>
<label for="submission-date">-----------------------------------</label>
<label for="emp-sign">:اسم الموظف</label>
</div>
</div>
<div class="employee-info" style="margin-left:30px;">
<div class="id_container">
<label for="emp-id">Dept./Branch:</label>
<label for="emp-id">-------------------</label>
<label for="dept-branch">:الفرع/لاداره</label>
</div>
<div class="name_container">
<label for="submission-date">Designation:</label>
<label for="submission-date">-----------------------------------</label>
<label for="emp-sign">:المسمى الوظيفى</label>
</div>
</div>
<div class="employee-info">
<div class="id_container">
<label for="emp-id">Submittion Date:</label>
<label for="emp-id">-------------------</label>
<label for="dept-branch">:تاريخ تقديم الاستقاله</label>
</div>
<div class="name_container">
<label for="submission-date">Mobile No:</label>
<label for="submission-date">-----------------------------------</label>
<label for="emp-sign">:رقم الهاتف</label>
</div>
</div>
<div class="employee-info">
<div class="id_container">
<label for="emp-id">Last Working Date:</label>
<label for="emp-id">-------------------</label>
<label for="dept-branch">:اخر يوم عمل</label>
</div>
<div class="name_container">
<label for="submission-date">Employee Signature:</label>
<label for="submission-date">-----------------------------------</label>
<label for="emp-sign">:توقيع الموظف</label>
</div>
</div>
<div class="employee-info">
<div class="id_container">
<label for="emp-id">Reason:</label>
<label for="emp-id">-------------------</label>
</div>
<div class="name_container">
<label for="emp-id">-------------------</label>
<label for="emp-sign">:سبب الاستقاله</label>
</div>
</div>
<div class="employee-info">
<div class="id_container">
<label for="emp-id">-------------------------------------------------------</label>
</div>
<div class="name_container">
<label for="emp-id">-------------------------------------------------------------</label>
</div>
</div>
</form>
</div>
<div class="table-border-end"></div>
</div>
</body>
</html>expected result as below :
