如何給css在同一行中排列標籤，文本框和文本區域

Question

我給出的代碼如下。如果在點擊更多數據時刪除了這些數據，並且包含上述內容的下一行發生衝突，並且地方一直在變化，任何人都可以通過說出什麼是錯誤的以及如何克服它來感謝。

CSS

 .label_left { 
width: 35%; 
float: left; 
text-align: right; 
line-height: 30px; 
    } 
.text_right1 { 
width: 27%; 
float:left; 
} 
.text_right2 { 
width: 27%; 
float:left; 
} 

和HTML是如下

 <div class="label_left"><label> 
     What was your ACTUAL state tourism budget for the following categories for FY 2011-2012? :<br> 
     <span class="comment more">(*Personnel Services;*Other Administrative Costs;*Advertising;Sales Promotion;*Printing and Promotion;*Inquiry Fulfillment;*Press and Public Relations;*Research;*Industry Relations;*Grant Programs;*Website Development/Maintainance;*Cooperative Marketing Dollars - state/territory contribution only,and *Other) (SEE THE "CATEGORIES" TAB FOR A DEFINITON OF EACH CATEGORY)<br> 
     NOTE: Recognizing that not all states have welcome centers and film divisions, please omit from your state's FY 2010-2011 tourism budget.</span></label></div> 

    <div class="text_right1" ><br><br><input type="text" name="state" id="state" value="" size="30" style="height:20px;" /></div> 
    <div class="text_right2"><br><br><textarea name="state_note" id="state_note" rows="3" cols="20"></textarea> 
    <br /><br /><br /><br><br><br><br /><br /><br /><br /><br /><br /><br><br /><br /><br /><br><br /><br /><br /><br> 
    </div> 

    <div class="label_left"><label> 
     Total amount of public sector funds for ACTUAL FY 2011-2012 budget :<br> 
     <span class="comment more">(e.g., state general revenue fund appropriation, receipts from a dedicated or earmarked tax such as lodging/tourism/rental car and/or sales tax, lottery receipts, federal funds such as Transportation Enhancement monies, etc. DO NOT INCLUDE SPECIAL LEGISLATIVE APPROPRIATIONS IN WHICH THE TOURISM OFFICE IS SIMPLY THE ADMINISTRATOR OF THIS "PASS THROUGH" APPROPRIATION.)</span> </label></div> 
    <div class="text_right1"><br><br><input type="text" name="public_amt" id="public_amt" value="" size="30" style="height:20px;" /></div> 
    <div class="text_right2"><br><br><textarea name="state_note" id="state_note" rows="3" cols="20"></textarea> 
    <br /><br /><br /><br><br><br><br /><br /><br /><br><br><br> 
    </div> 

Answer 1

試試這個

http://jsfiddle.net/HVgF6/

CSS

.label_left { 
    width: 30%; 
    float: left; 
    text-align: right; 
    line-height: 30px; 
    margin: 0 10px 0 0; 
    word-wrap: break-word; 
} 
.text_right1 { 
    width: 30%; 
    float: left; 
} 
.text_right2 { 
    width: 30%; 
    float: left; 
} 
.clr { 
    clear: both; 
} 
input, texarea { 
    width: 154px; 
    float: left; 
    verticle-align: top; 
}