Label and Text Box on the Same Line Using CSS

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

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.

label and input box on the same line

Do it with CSS:

label { clear: both; }

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%
}