html form - make inputs appear on the same line

Question

I am struggling to make two html form inputs (first and last name) appear on the same line side by side. I have tried using float, but that seems to make the rest of the inp

Answer 1

You can wrap the following in a DIV:

<div class="your-class">

  <label for="First_Name">First Name:</label>
  <input name="first_name" id="First_Name" type="text" />
  <label for="Name">Last Name:</label>
  <input name="last_name" id="Last_Name" type="text" /> 

</div>

Give each input float:left in your CSS:

.your-class input{
  float:left;
}

example only

You might have to adjust margins.

Remember to apply clear:left or both to whatever comes after ".your-class"

Answer 2

Wrap your multiple form elements in a div with a class that uses

display: table 

Inside that div, wrap each label and input in divs with a class that uses

display: table-cell

Stay away from floats!

Reference

Answer 3

A more modern solution:

Using display: flex and flex-direction: row

form {
  display: flex; /* 2. display flex to the rescue */
  flex-direction: row;
}

label, input {
  display: block; /* 1. oh noes, my inputs are styled as block... */
}

<form>
  <label for="name">Name</label>
  <input type="text" id="name" />
  <label for="address">Address</label>
  <input type="text" id="address" />
  <button type="submit">
    Submit
  </button>
</form>

Answer 4

Try just putting a div around the first and last name inputs/labels like this:

<div class="name">
        <label for="First_Name">First Name:</label>
        <input name="first_name" id="First_Name" type="text" />

        <label for="Name">Last Name:</label>
        <input name="last_name" id="Last_Name" type="text" /> 
</div>

Look at the fiddle here: http://jsfiddle.net/XAkXg/

Answer 5

You can make a class for each label and inside it put:

display: inline-block;

And width the value that you need.

Answer 6

This test shows three blocks of two blocks together on the same line.

.group {
    display:block;
    box-sizing:border-box;
}
.group>div {
    display:inline-block;
    padding-bottom:4px;
}
.group>div>span,.group>div>div {
    width:200px;
    height:40px;
    text-align: center;
    padding-top:20px;
    padding-bottom:0px;
    display:inline-block;
    border:1px solid black;
    background-color:blue;
    color:white;
}

input[type=text] {
    height:1em;
}

<div class="group">
    <div>
        <span>First Name</span>
        <span><input type="text"/></span>
    </div>
    <div>
        <div>Last Name</div>
        <div><input type="text"/></div>
    </div>
    <div>
        <div>Address</div>
        <div><input type="text"/></div>
    </div>
</div>