javascript - 2 个内联 div，第 2 个与第 1 个不一致

Question

我正在尝试让第一个 div“#grp1”左对齐并与第二个 div“#grp2”内联。两个 div 都有 2 个输入元素，它们在它们的 div 中垂直对齐。

问题是 grp2 div 没有缩放其宽度以适应同一行。我一直在重置它的宽度，但控制台元素检查器显示它在页面上没有减少。我只是通过减少 grp1 的 with 使它们在同一条线上。 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% 的 margin 。只需删除它，它就会起作用。

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>