2个内联div，第2个与第一个不匹配

Question

我正在尝试将第一个div'＃grp1'左对齐并与第二个div'＃grp2'内联。 两个div中都有2个输入元素，它们在其div中垂直对齐。

问题是grp2 div的宽度没有按比例缩放以适合同一行。 我一直在重置其宽度，但控制台元素检查器显示页面上的宽度没有减少。 我仅通过减少grp1的使用使它们处于同一行。 grp2仍然没有改变。 我希望所有内容都更加紧凑。

非常感谢你。 如果您有时间，我将对grp2 div为何根本不扩展的一些细节表示赞赏； 我似乎总是在标记问题上陷入困境。

 legend{ color: RGB(25, 115, 115); } .label { float:left; width:60%; margin-top: 5px; font-weight:bold; color: RGB(25,90,90); font-size: 18; font-weight: 8; font-family: 'Open Sans Condensed', sans-serif; } .form-text{ color: RGB(100,100,100); font-size: 15; font-weight: 6; font-family: 'Open Sans Condensed', sans-serif; margin-top: 3px; } .grp1{ float: left; width: 40%; position: relative; } .grp2{ position: relative; margin-left: 45%; } select{ margin-bottom: 29px; } .err{ font-size: 15; font-style: italic; color: RGB(180,100,100); } 

 <div id="form-input"> <form id="form"> <fieldset> <legend class='form-text' style='font-size:20'>Hello World</legend> <div id='grp1' style='display:inline-block' class='grp1'> <label for='subject'style='display:block' class='label'> Choose your subject.<br> <input type="text" id="subject" name='subject' style="display:block" class='form-text'><br> </label> <label for='mode' style='display:block' class='label'> Select your search mode.<br> <select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)"> <option value="1">Search</option> <option value="2">Live</option> </select> </label> </div> <div id='grp2' style='display:inline-block' class='grp2'> <label for='startdate' style='display:block' id='startlabel' class='label'> Choose a start date for a search, up to one week ago: <br> <input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br> <div name="error1" id="starterror" style="display:none" class='err'></div> </label> <label for='enddate' style='display:block' id='endlabel' class='label'> Choose an end date for your search: <br> <input type="text" id="enddate" style="display:block" class='form-text'><br> <div name="error2" id="enderror" style="display:none" class='err'></div> </label> </div> </fieldset> </form> </div> 

Answer 1

由于您已将其设为相对，因此无需提供45％的保证金。 只需将其删除，它将起作用。

 legend{ color: RGB(25, 115, 115); } .label { float:left; width:60%; margin-top: 5px; font-weight:bold; color: RGB(25,90,90); font-size: 18; font-weight: 8; font-family: 'Open Sans Condensed', sans-serif; } .form-text{ color: RGB(100,100,100); font-size: 15; font-weight: 6; font-family: 'Open Sans Condensed', sans-serif; margin-top: 3px; } .grp1{ float: left; width: 40%; position: relative; } .grp2{ position: relative; } select{ margin-bottom: 29px; } .err{ font-size: 15; font-style: italic; color: RGB(180,100,100); } 

 <div id="form-input"> <form id="form"> <fieldset> <legend class='form-text' style='font-size:20'>Hello World</legend> <div id='grp1' style='display:inline-block' class='grp1'> <label for='subject'style='display:block' class='label'> Choose your subject.<br> <input type="text" id="subject" name='subject' style="display:block" class='form-text'><br> </label> <label for='mode' style='display:block' class='label'> Select your search mode.<br> <select name="mode" form="form-input" id="mode" class='form-text' onchange="buttonHandler(this)"> <option value="1">Search</option> <option value="2">Live</option> </select> </label> </div> <div id='grp2' style='display:inline-block' class='grp2'> <label for='startdate' style='display:block' id='startlabel' class='label'> Choose a start date for a search, up to one week ago: <br> <input type="text" id="startdate" value="" placeholder="day/month/2016" style="display:block" class='form-text'><br> <div name="error1" id="starterror" style="display:none" class='err'></div> </label> <label for='enddate' style='display:block' id='endlabel' class='label'> Choose an end date for your search: <br> <input type="text" id="enddate" style="display:block" class='form-text'><br> <div name="error2" id="enderror" style="display:none" class='err'></div> </label> </div> </fieldset> </form> </div>