html - 如何为在同一行中并排排列标签、文本框和文本区域提供 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;
}