CODEWITHSUNDEEP
htmlcss
VLS
VLS

Reputation: 445

Label and Input fields on same line

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?

Upvotes: 0

Views: 7104

Answers (1)

Pierre-Loup Pagniez
Pierre-Loup Pagniez

Reputation: 3761

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.

Upvotes: 1

Related Questions