How to Put an Input Element on the Same Line as Its Label

How to make label and input appear on the same line on an HTML form?

Assuming you want to float the elements, you would also have to float the label elements too.

Something like this would work:

label {
    /* Other styling... */
    text-align: right;
    clear: both;
    float:left;
    margin-right:15px;
}

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}

<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

How can I put an input element on the same line as its label?

It's possible without JavaScript, see: http://jsfiddle.net/Khmhk/

This works in IE7+ and all modern browsers.

HTML:

<label for="test">Label</label>
<span><input name="test" id="test" type="text" /></span>

CSS:

label {
    float: left
}
span {
    display: block;
    overflow: hidden;
    padding: 0 4px 0 6px
}
input {
    width: 100%
}

The reason why overflow: hidden is so magically useful in this instance is explained here.

display: table-cell is another option, see: http://jsfiddle.net/Khmhk/1/

This works in IE8+ and all modern browsers:

HTML:

<div class="container">
    <label for="test">Label</label>
    <span><input name="test" id="test" type="text" /></span>
</div>

CSS:

.container {
    display: table;
    width: 100%
}
label {
    display: table-cell;
    width: 1px;
    white-space: nowrap
}
span {
    display: table-cell;
    padding: 0 0 0 5px
}
input {
    width: 100%
}

How do I align Label and Input on the same line to the right?

Keep in mind, that label is an inline element similar to span, so you need to set its css to display: inline-block to behave like a div

once you have done this, the easiest way to have them in the same line is to use display:flex and flex-wrap: nowrap on the parent div.

here is my favorite flex-cheat-sheet

I have simplified your example and you can see how this works clicking below on Run code snippet.

.pull-right {  display: flex;  flex-wrap: nowrap;}
.pull-right input{  border: 1px solid green;}.pull-right label{ border: 1px solid red; display: inline-block;}

<div class="pull-right">  <div class="search" style="height: 18px" ng-if="vm.showSearch()">    <form style="margin:0px" name="filter_actions" novalidate>      <div>        <input id="freeTextSearch" type="text"         class="form-control input-sm" autofocus ng-change="vm.filterTable(Search)"         ng-model="Search"         style="text-indent: 5px;" minlength="1"         ng-model-options="{debounce:100}" id="Search" name="Search" placeholder="Search fields">        <a ng-show="Search"         ng-click="localSearch = ''; vm.filterTable(localSearch)">        <i style="vertical-align: middle; top:4px; right:35px; position: absolute"         class="glyphicon glyphicon-remove">      </i></a>      </div>    </form>  </div>  <div class="btn-group btn-group-xs" role="group" aria-label="...">    <label class="btn btn-default" role="button" ng-click="vm.popUp()"><i class="fa fa-expand" style="color:darkgreen;">your icons</i></label>  </div></div>

How do I make a label stay on the same line as it's form

It's easy, wrap your label and input inside a div and use flex.

https://www.w3schools.com/css/css3_flexbox.asp

Check the code below:

.label-wrap{
  display:flex;
}

<div class='label-wrap'>
  <label for="min">Minimum:</label><br>
  <input type="number" id="min" name="min" class="form-control" value="1">
</div>

Sample Image

label and input box on the same line

Do it with CSS:

label { clear: both; }

Label isn't on the same line as its .input-group bootstrap 5

Try this code. It adds the row and col syntax in your html.

<div class="input-group mb-3 row">
  <label class="input-group-text form-floating col-12">Tell us Your Name *</label>
  <input type="text" class="form-control col-6" placeholder="First Name">
  <input type="text" class="form-control col-6" placeholder="Last Name">

This will put the label at the top and the input fields below the label.

Label and Input fields on same line

Your code already tries to put both the label and the input on the same line, but your input's width: 90% makes it too large, so it goes on another line. Try reducing your input's width and it will work.
For example, try reducing your inputs' width to 70% and put your labels' width to 160px instead of 40px.

Put a label and input type= text tag in the same row

Solution

House both label and input into a single div
Add display: flex to the parent so you can have more flexibility styling your fields on small screens. For example, you could move the label above the input on small screens when viewport space is limited using flex-direction: column
labels typically don't have ids. Instead, they point to form elements containing ids. I've fixed your labels in the following code
Duplicate ids are a no-no as well (also fixed)

.row {  display: flex;  align-items: center;  justify-content: flex-end;}
.input-field {  margin-left: 1em;  padding: .5em;  margin-bottom: .5em;}

<form id="survey-form">  <div class="row">    <label for="name">* Name:</label>    <input type="text" id="name" class="input-field" required placeholder="Enter your name">        </div>
  <div class="row">    <label for="email">* Email:</label>    <input type="email" id="email" class="input-field" required placeholder="Enter your email">      </div></form>

How to align the label and the input at the same line in Bootstrap 5?

<!DOCTYPE html>
<html>
  <head>
    <title>HTML CSS JS</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="container pt-5">
      <form (ngSubmit)="login()">
      <div class="mb-3">
      <div class="d-inline-flex align-items-center">
          <label for="exampleInputEmail1" class="form-label" style="min-width: 100px !important">User</label>
          <input type="text" class="form-control" name="exampleInputEmail1" style="width: 40%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
          
        </div>
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
      </div>
        
        
        <div class="mb-3">     
        <div class="d-inline-flex align-items-center">
          <label for="exampleInputPassword1" class="form-label" style="min-width: 100px !important">Password</label>
          <input type="password" class="form-control" name="exampleInputPassword1" style="width: 40%" [(ngModel)]="loginForm.password" required maxlength="4">
        </div>
        </div>
        
        <button type="submit" class="btn btn-primary">Connection</button>
      </form>
    </div>
  </body>
</html>

Display a $ sign beside the input on the same line

My guess is form-control has the style display:block; and width:100%

Remove the above styles or override it using custom css below

.form-control.tablecellcustom {
 display: inline;
 width: auto;
}

after applying styles

I think your code internally uses Bootsrap. This is a guess, might be wrong. If its internally using Bootstrap you can try using input group also.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input asp-for="g0" type="text" value="100000" class="form-control tablecellcustom" disabled>
</div>