左にdiv入力コントロール、右にボタンがあります。入力制御数は、要件によって異なる場合があります。問題は、i/p コントロールが 4 を超える場合 (解像度 1600X900)、コントロールが適切に配置されないことです。つまり、行の最後に余分なスペースがあると、コントロールが 2 行に配置されます。
HTML
<div id ="Container">
<div style="float: left;display: inline;max-width: 90%;">
<div class =" divStyle">
<label for ="One" >One:</label>
<input id = "One" type ="text" />
</div>
<div class =" divStyle">
<label for ="Two">Two:</label>
<input id = "Two" type ="text" />
</div>
<div class =" divStyle">
<label for ="Three">Three:</label>
<input id = "Three" type ="text" />
</div>
<div class =" divStyle">
<label for ="Four">Four:</label>
<input id = "Four" type ="text" />
</div>
<div class =" divStyle">
<label for ="Five" >Five:</label>
<input id = "Five" type ="text" />
</div>
<div class =" divStyle">
<label for ="Six">Six:</label>
<input id = "Six" type ="text" />
</div>
<div class =" divStyle">
<label for ="Seven" >Seven:</label>
<input id = "Seven" type ="text" />
</div>
<div class =" divStyle">
<label for ="Eight">Eight:</label>
<input id = "Eight" type ="text" />
</div>
</div>
<div style="float: left;display: inline;position: relative;" >
<button type ="button">Hello World</button>
</div>
CSS
label
{
float:left;
min-width: 150px;
font-weight:bold;
}
input
{
margin-right:10px;
}
.divStyle
{
float:left;
display:inline;
min-height:30px;
}
画像
ただし、I/P コントロールが <=4 の場合、ボタンは正しく配置されています
以下のcssで直るかもしれません。しかし、すべての解像度で機能しているわけではありません
div:nth-child(4n+1)
{
clear:left;
}
これを解決するのを手伝ってください。