我使用 html 和 CSS 处理模板。我面临的问题是我无法使左右对齐标签文本相同。
作为例子
提交日期和员工 ID 不是从左侧的同一点开始，因此我需要左侧的所有文本都具有相同的对齐方式。
同样在右侧，文本也不是从与 םרׁ 和 ׁׁׄ 相同的点开始
所以我需要右侧的所有文本都具有相同的对齐方式。
完整的 html 和 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>
预期结果如下：
更新帖子
那么如何使用 Table 来解决我的对齐问题
更新帖子
我尝试如下：
.employee-info {
display: flex;
justify-content: space-around;
margin-inline: auto;
max-width: 1000px;
}
.id_container {
display: flex;
gap: 10px;
flex: 1;
}
.name_container {
display: flex;
gap: 10px;
flex: 1;
}
但左右对齐问题没有解决
使两列的大小相同flex: 1;并将父元素居中marginand max-width.
.employee-info {
margin-inline: auto;
max-width: 1000px;
}
.id_container,
.name_container {
flex: 1;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
