响应式表单，如何在响应时保持旁边的div

Question

    <div class="formRow" style="">
                <div class="labeldiv">
                <label class="desc" id="title1" for="full_name" style="">How much cover would you like?<br>(Between £20,000 and £3,000,000.)</label>
                </div>
                <div class="answerSet" style="">
                     <div class="answer"><input type="text"  class="mediumInput ">" ></div> 

                     <div class="validation-icon"></div>
                     <div class="message-container">
                        <div class="validation-message">This is a required field.</div>
                     </div>
                     <div class="help-messages"></div>
                </div>
            </div>




@media (min-width: 600px){
 div.answerSet{
width: 53%;
float: right;
}
div.labeldiv{
    float:left;
    height:100%;
    width: 47%;
}

#lifeInsuranceFormHolder div.answer {
    padding-top: 20px;
width: auto;
float:left;

}

#lifeInsuranceFormHolder div.answer p {
clear: both;
font-size: 12px;
height: 55px;
text-align: center;
width: 64px;
}

}

大家好，

如图所示，当窗口尺寸较小时，十字（“div class ='validation'”中的背景图片）会下降一行而不是保留在输入的一侧。

如何将div.answer和div.validation保持为内联块？

谢谢。

Answer 1

您可以简单地将容器设置为停止换行文本，如下所示：

.answerSet {white-space: nowrap;}