Etiketten- und Eingabefelder auf der gleichen Linie

Question

Ich habe auf SO hier viele Fäden gehen durch gewesen und versucht, dies bisher aber nichts zu tun. Ich möchte Label und Eingabefelder in der gleichen Zeile hinzufügen .. einfach so, aber es kann nicht herausgefunden werden.

Was ich habe, ist diese einfache 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> 

Die CSS etwas länger sind, und ich werde hier das Teil für Beschriftungen und Felder hinzufügen, die ich versucht habe

#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; 
} 

Hier die vollständige Demo von, was wie jetzt aussieht: https://jsfiddle.net/9gmt8rcd/

Bitte führen Sie mich, was ich sonst hier ändern muss?

Answer 1

Ihr Code versucht bereits, die Beschriftung und den Eingang in die gleiche Zeile zu setzen, aber die Eingabe width: 90% macht es zu groß, so dass es in einer anderen Zeile geht. Versuchen Sie, die Breite Ihres Inputs zu reduzieren und es wird funktionieren. Versuchen Sie zum Beispiel, Ihre Eingaben width auf 70% zu reduzieren und setzen Sie Ihre Etiketten width auf 160px statt 40px.