What is the best way to display both an employee's name and ID on a single line using CSS and HTML?

I am currently working on an asp.net MVC app and facing an issue with adding employee ID and employee name on the same line, similar to the web design provided. I need to make modifications using HTML and CSS to achieve this.

The problem is that I am unable to have employee ID and employee name appear on the same line. Can you please advise on how to accomplish this?

Here is a snippet of the code that I have tried:

<!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>
    /* Insert CSS styling here */
    </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>

https://i.sstatic.net/x0WvE.png

Update Post

The answer helped solve my query, but it lacks borders as shown in the attached image. Could you please modify the code by adding borders on the left, right, top, and bottom exactly as shown in the image?

Answer №1

To customize your labels, you can use the CSS property 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;
    }
    
    form {
      margin-top: 20px;
    }

    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> 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">To be filled 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">Employee Number:</label>
         <label for="dept-branch">----</label>

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

        <label for="emp-sign">Employee Signature:</label>
        <label for="emp-sign">-----</label>
      </div>

    </form>

</body>
</html>

Answer №2

For a sleek design layout, you can group elements within a div and utilize flexbox. Below is an example with inline styles for better comprehension.

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

...
<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>

  ...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

QuickCopy - Capture only what's in view

Hi there, I have a question: I'm trying to figure out how to make a button copy only the visible text within the element with id="description". Can someone help me troubleshoot? HTML: <p id="description"> Test <span style="display:none"> ...

Containing more than a full page of information, the footer stays fixed at the bottom of the screen, even as the user scrolls to

As I work on developing my artist website to showcase my music, I have encountered an issue with the footer placement. My goal is seemingly simple - I want a footer that always sits at the bottom of the site, just under the content/body section. There shou ...

Preventing scrollbar-induced content shifting in Material-UI components: A guide

My browser app displays content dynamically, which can vary in length compared to the screen size. This causes a vertical scrollbar to appear and disappear on desktop browsers, leading to the content shifting left and right. To prevent this, I apply style ...

Troubleshooting: The issue of receiving a 403 error when trying to access

I'm currently using Codeigniter 3 and have encountered an issue with a script. When the code is in my HTML file, everything works perfectly fine. However, if I move the code to an external file, I receive a 403 error. The location of my JavaScript fi ...

AngularJS ui-select not responding correctly to selected items

Currently, I am utilizing the ui-select module within AngularJS. <ui-select ng-model="tipData.category" search-enabled="false" name="category" required="required" class="orange-site-color-select custom-select"> <ui-select-match><span clas ...

Encountering an IndexError while iterating through a table in Selenium using Python due to a list index being out of range

Encountering IndexError: list index out of range while iterating through an HTML table but unsure about the cause. My function for iterating through the table involves clicking on web page frames and downloading files from another frame. The table consis ...

The NG8002 error has occurred, as it is not possible to connect to 'matDatepicker' because it is not a recognized attribute of 'input'

I've come across an issue while working on my Angular 15 application with Angular Material. I'm trying to incorporate a date picker, but after adding the code snippet below, I encountered an error. <mat-form-field appearance="outline" ...

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

Ajax: displaying an array and populating text fields

Looking to populate multiple "input textboxes" using ajax. Currently, I can successfully fill a single textbox with the following code: document.getElementById("meow").value=xmlhttp.responseText; Below is the php script that retrieves mysql results and e ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

Arranging images and text side by side with varying breakpoints using Bootstrap classes

In my layout, I have an image and text side by side, with the image appearing first and the text to its left. My goal is to display the text above the image when the screen size is reduced to a small breakpoint, and then switch back to the original layou ...

Issue with the execution of Javascript code. Edit required

After creating a registration form that allows users to input their information for registration, I encountered an issue where if certain fields were left empty or if the user name was unavailable or the email address was already registered, a warning mess ...

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

Problems arise when Twitter Typeahead, Knockout JS, and Twitter Bootstrap 3 are unable to cooperate harmoniously

I'm currently working on integrating the knockout-bootstrap custom binding for typeahead jQuery with Bootstrap 3, specifically to use it with Durandal 2.0. However, I'm facing some challenges in getting it to function correctly. The original bind ...

Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes? In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight. font-size, font-style and font-weight I attempted to use -fx-font-color ...

How can I make multiple elements in the same column span across multiple rows with CSS Grid?

Here is a scenario where the HTML and CSS (specifically the .type-a section) utilize CSS Grid. (Click here to view the CodePen example) The goal is to ensure that all elements with the .col1 class are aligned correctly in the first column, while having t ...

Does including the "max-height" property within a table result in a height of zero?

Check out the code snippet below (you can also view a demo on JsFiddle): #outer { display: table; height: 200px; width: 100%; background: gray; } #inner { width: 100%; background: blue; max-height: 100%; } <div id="outer" ...

No change in the element's text content when clicking

I'm working on creating a timer that counts down from either 15 or 30 seconds. However, I'm having trouble changing the text value when the 15 button is clicked. Can someone help me figure out what's wrong? Thank you in advance HTML <h ...

The resulting line will consist of the discovered string

Let's say there's an interesting HTML document presented below with associated line numbers: 30 - <div id="myDiv"> 31 - <span class="mySpan">Some Text</span> In this scenario, PHP is being utilized for a specific purpose: $ ...