Label and Input fields on same line

Question

I've been go trough a lot of threads here on SO and tried to accomplish this but nothing so far. I want to add label and input fields on same line.. simple as that yet can't figured it out.

What I have is this simple form

<section id="container">

<form name="hongkiat" id="hongkiat-form" method="post" action="#">

<div id="wrapping" class="clearfix">

<section id="aligned">

    <div class="block">
          <label for="name">Full Name</label>
          <input type="text" name="name" id="name" placeholder="Full Name" autocomplete="off" tabindex="1" class="txtinput">
    </div>
    <div class="block">
        <label for="email">Email Address</label>
        <input type="email" name="email" id="email" placeholder="Your e-mail address" autocomplete="off" tabindex="2" class="txtinput">
    </div>
    <div class="block">
        <label for="message">Statement</label>
        <textarea name="message" id="message" placeholder="Statement" tabindex="5" class="txtblock"></textarea>
    </div>
        </section>

    </div>
    <section id="buttons">
        <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
    </section>
    </form>
</section>

The css is a bit longer and I'll add here the part for labels and fields which I've tried

#hongkiat-form { box-sizing: border-box; }

#hongkiat-form .txtinput { 
    display: block;
    font-family: "Helvetica Neue", Arial, sans-serif;
    border-style: solid;
    border-width: 1px;
    border-color: #dedede;
    margin-bottom: 20px;
    font-size: 1.55em;
    padding: 11px 25px;
    width: 90%;
    color: #777;
  float: right;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset; 
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
    -o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}

#wrapping { width: 100%; box-sizing: border-box; }

.block label {
  display: inline-block;
  width: 40px; 
  float:left;
    font-family: "Droid Serif", Georgia, serif;
    font-size: 1.4em;
    line-height: 1.8em;
    font-weight: 500;  
}

Here is the full demo of what is looks like now: https://jsfiddle.net/9gmt8rcd/

Kindly guide me what else I need to change here?

Pierre-Loup Pagniez · Accepted Answer · 2017-03-08 09:03:12Z

1

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.

answered Mar 8, 2017 at 9:03

Pierre-Loup Pagniez

3,7913 gold badges31 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

VLS Over a year ago

I tough that since is responsive should make this by it's own.. Now when you mentioned this I've think about and there is no way to make this alone.. Thanks, I knew that is something simple that I've missed. It's working now

VLS Over a year ago

Just a question. Here is updated version where they are on same line. Can you tell me why the labels are not 'bond' for each input eg. check last two inputs and where are their labels: jsfiddle.net/9gmt8rcd/2

Rouhollah Mazarei Over a year ago

I think it'll be good to add something like .block { overflow: auto; } to clean the float.

VLS Over a year ago

I've tried with label { clear: both; } and seems also works. Thanks

Collectives™ on Stack Overflow

Label and Input fields on same line

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related