2个内联div，第2个不符合第1个

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％的保证金。只需将其删除即可。

＆＃13;

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;