同じ行にあるラベルと入力フィールド

Question

私はここで多くのスレッドを行ってきましたが、これを達成しようとしましたが、これまで何も行っていませんでした。同じ行にラベルと入力フィールドを追加したいのですが、それでも簡単ではありません。

私は何を持っていることは、このシンプルなフォーム

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

CSSが少し長く、私はここに追加します私は

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

を試してみたラベルとフィールドの一部がここにあるさ今見ているものの完全なデモ：https://jsfiddle.net/9gmt8rcd/

私はここで何を変更する必要がありますか？

Answer 1

あなたのコードはすでに同じ行にラベルと入力の両方を入れようとしていますが、入力のwidth: 90%は大きすぎるため、別の行に移動します。あなたの入力の幅を減らすと、それは動作します。 たとえば、入力のwidthを70%に減らして、のラベルの代わりにwidthを40pxの代わりに160pxに設定してみてください。