同一行上的標籤和輸入字段

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改爲160px而不是40px。