jquery 如何使用CSS和HTML在同一行中添加员工姓名和员工ID？

laawzig2 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(117)

我在asp.net MVC应用程序工作。我面临的问题是在同一行上添加员工ID和员工姓名，正如网页设计所附。
所以我需要修改脚本使用HTML和CSS添加
员工ID和姓名和员工姓名在同一行
我的问题，我不能添加员工ID和员工姓名在同一行，所以
请问怎么做？
代码详细说明了我尝试的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Your custom CSS -->
    <style>
    .form-header {
text-align: center;
width: 30%;
margin: 0 auto;
background-color: 
gray;
border-radius: 10px 10px 0 0;
padding: 20px;
}

.form-header h2 {
color: 
white;
margin: 0;
}

.form-container {
  background-color: 
#eee;
  padding: 20px;
  border: 1px solid 
#ccc;
  border-radius: 5px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.form-section {
  margin-bottom: 10px;
  width:400px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid 
#ccc;
  border-radius: 3px;
}

.fill-by-employee {
  text-align: right;
  font-style: italic;
  color: 
#888;
}
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;
}
    </style>
</head>
<body>
   <div class="form-header"> <h2> نموذج تسجيل استقاله <br/> Resignation Submission Form</h2> </div>
<div class="form-container">
  <div class="form-section">
    <label for="emp-input">Filled By Employee:</label>
  </div>
  <div class="form-section">
    <p class="fill-by-employee">يتم ملئها من الموظف</p>
  </div>
</div>
   <form>
      <div class="employee-info">
        <label for="emp-id">Emp. ID:</label>
        <label for="emp-id">-----</label>

        <label for="dept-branch">رقم الموظف:</label>
         <label for="dept-branch">----</label>

        <label for="submission-date">Emp Name:</label>
        <label for="submission-date">------</label>

        <label for="emp-sign">اسم الموظف:</label>
        <label for="emp-sign">-----</label>
      </div>

    </form>

</body>
</html>

更新帖子

回答解决了我的问题，但没有添加边框的图像附加，你可以请修改代码附加添加边框的左，右，底部和顶部完全一样的图像请

jquery

来源：https://stackoverflow.com/questions/77163633/how-to-add-employee-name-and-employee-id-on-same-line-using-css-and-html

2条答案

按热度按时间

uoifb46i1#

您可以将标签设置为display: inline-block

.employee-info > label {
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Your custom CSS -->
    <style>
    .form-header {
text-align: center;
width: 30%;
margin: 0 auto;
background-color: 
gray;
border-radius: 10px 10px 0 0;
padding: 20px;
}

.form-header h2 {
color: 
white;
margin: 0;
}

.form-container {
  background-color: 
#eee;
  padding: 20px;
  border: 1px solid 
#ccc;
  border-radius: 5px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.form-section {
  margin-bottom: 10px;
  width:400px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid 
#ccc;
  border-radius: 3px;
}

.fill-by-employee {
  text-align: right;
  font-style: italic;
  color: 
#888;
}
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;
}
    </style>
</head>
<body>
   <div class="form-header"> <h2> نموذج تسجيل استقاله <br/> Resignation Submission Form</h2> </div>
<div class="form-container">
  <div class="form-section">
    <label for="emp-input">Filled By Employee:</label>
  </div>
  <div class="form-section">
    <p class="fill-by-employee">يتم ملئها من الموظف</p>
  </div>
</div>
   <form>
      <div class="employee-info">
        <label for="emp-id">Emp. ID:</label>
        <label for="emp-id">-----</label>

        <label for="dept-branch">رقم الموظف:</label>
         <label for="dept-branch">----</label>

        <label for="submission-date">Emp Name:</label>
        <label for="submission-date">------</label>

        <label for="emp-sign">اسم الموظف:</label>
        <label for="emp-sign">-----</label>
      </div>

    </form>

</body>
</html>

赞(0）回复(0）举报 2023-10-17

0dxa2lsx2#

你可以试着这样做，将元素分组到一个div中，然后使用flexbox来布局设计。我已经把内联样式，以便您可以更好地理解。

.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,
.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;
}

<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">
        <div class="id_container">
          <label for="emp-id">Emp. ID:</label>
          <label for="emp-id">-----</label>

          <label for="dept-branch">رقم الموظف:</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>
          <label for="emp-sign">-----</label>
        </div>
      </div>
    </form>
  </div>
  <div class="table-border-end"></div>
</div>
</body>

</html>

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 如何使用CSS和HTML在同一行中添加员工姓名和员工ID？

2条答案

相关问题

热门标签

最新问答