2行目のdiv、2番目の行は1番目の行に収まらない

Question

私は最初のdiv、 '＃grp1'、2番目の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>